Skip to content

Commit 8ac9ca4

Browse files
yuzh2001benjamincanac
yuzh2001
and
benjamincanac
authoredAug 2, 2024··
fix(module): reduce css bundle size by fixing safelist regex (#2005)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
·
v2.21.1v2.18.4
1 parent 3485092 commit 8ac9ca4

File tree

2 files changed

+78
-70
lines changed

2 files changed

+78
-70
lines changed
 

‎src/runtime/utils/colors.ts

+75-67
Original file line numberDiff line numberDiff line change
@@ -19,193 +19,193 @@ const colorsToExclude = [
1919

2020
const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist']> = {
2121
alert: (colorsAsRegex) => [{
22-
pattern: new RegExp(`bg-(${colorsAsRegex})-50`)
22+
pattern: RegExp(`^bg-(${colorsAsRegex})-50$`)
2323
}, {
24-
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
24+
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
2525
variants: ['dark']
2626
}, {
27-
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
27+
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
2828
}, {
29-
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
29+
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
3030
variants: ['dark']
3131
}, {
32-
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
32+
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
3333
}, {
34-
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
34+
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
3535
variants: ['dark']
3636
}, {
37-
pattern: new RegExp(`ring-(${colorsAsRegex})-500`)
37+
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`)
3838
}],
3939
avatar: (colorsAsRegex) => [{
40-
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
40+
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
4141
variants: ['dark']
4242
}, {
43-
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
43+
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
4444
}],
4545
badge: (colorsAsRegex) => [{
46-
pattern: new RegExp(`bg-(${colorsAsRegex})-50`)
46+
pattern: RegExp(`^bg-(${colorsAsRegex})-50$`)
4747
}, {
48-
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
48+
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
4949
variants: ['dark']
5050
}, {
51-
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
51+
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
5252
}, {
53-
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
53+
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
5454
variants: ['dark']
5555
}, {
56-
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
56+
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
5757
}, {
58-
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
58+
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
5959
variants: ['dark']
6060
}, {
61-
pattern: new RegExp(`ring-(${colorsAsRegex})-500`)
61+
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`)
6262
}],
6363
button: (colorsAsRegex) => [{
64-
pattern: new RegExp(`bg-(${colorsAsRegex})-50`),
64+
pattern: RegExp(`^bg-(${colorsAsRegex})-50$`),
6565
variants: ['hover', 'disabled']
6666
}, {
67-
pattern: new RegExp(`bg-(${colorsAsRegex})-100`),
67+
pattern: RegExp(`^bg-(${colorsAsRegex})-100$`),
6868
variants: ['hover']
6969
}, {
70-
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
70+
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
7171
variants: ['dark', 'dark:disabled']
7272
}, {
73-
pattern: new RegExp(`bg-(${colorsAsRegex})-500`),
73+
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`),
7474
variants: ['disabled', 'dark:hover']
7575
}, {
76-
pattern: new RegExp(`bg-(${colorsAsRegex})-600`),
76+
pattern: RegExp(`^bg-(${colorsAsRegex})-600$`),
7777
variants: ['hover']
7878
}, {
79-
pattern: new RegExp(`bg-(${colorsAsRegex})-900`),
79+
pattern: RegExp(`^bg-(${colorsAsRegex})-900$`),
8080
variants: ['dark:hover']
8181
}, {
82-
pattern: new RegExp(`bg-(${colorsAsRegex})-950`),
82+
pattern: RegExp(`^bg-(${colorsAsRegex})-950$`),
8383
variants: ['dark', 'dark:hover', 'dark:disabled']
8484
}, {
85-
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
85+
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
8686
variants: ['dark', 'dark:disabled']
8787
}, {
88-
pattern: new RegExp(`text-(${colorsAsRegex})-500`),
88+
pattern: RegExp(`^text-(${colorsAsRegex})-500$`),
8989
variants: ['dark:hover', 'disabled']
9090
}, {
91-
pattern: new RegExp(`text-(${colorsAsRegex})-600`),
91+
pattern: RegExp(`^text-(${colorsAsRegex})-600$`),
9292
variants: ['hover']
9393
}, {
94-
pattern: new RegExp(`outline-(${colorsAsRegex})-400`),
94+
pattern: RegExp(`^outline-(${colorsAsRegex})-400$`),
9595
variants: ['dark:focus-visible']
9696
}, {
97-
pattern: new RegExp(`outline-(${colorsAsRegex})-500`),
97+
pattern: RegExp(`^outline-(${colorsAsRegex})-500$`),
9898
variants: ['focus-visible']
9999
}, {
100-
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
100+
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
101101
variants: ['dark:focus-visible']
102102
}, {
103-
pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
103+
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
104104
variants: ['focus-visible']
105105
}],
106106
input: (colorsAsRegex) => [{
107-
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
107+
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
108108
variants: ['dark']
109109
}, {
110-
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
110+
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
111111
}, {
112-
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
112+
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
113113
variants: ['dark', 'dark:focus']
114114
}, {
115-
pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
115+
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
116116
variants: ['focus']
117117
}],
118118
radio: (colorsAsRegex) => [{
119-
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
119+
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
120120
variants: ['dark']
121121
}, {
122-
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
122+
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
123123
}, {
124-
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
124+
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
125125
variants: ['dark:focus-visible']
126126
}, {
127-
pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
127+
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
128128
variants: ['focus-visible']
129129
}],
130130
checkbox: (colorsAsRegex) => [{
131-
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
131+
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
132132
variants: ['dark']
133133
}, {
134-
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
134+
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
135135
}, {
136-
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
136+
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
137137
variants: ['dark:focus-visible']
138138
}, {
139-
pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
139+
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
140140
variants: ['focus-visible']
141141
}],
142142
toggle: (colorsAsRegex) => [{
143-
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
143+
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
144144
variants: ['dark']
145145
}, {
146-
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
146+
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
147147
}, {
148-
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
148+
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
149149
variants: ['dark']
150150
}, {
151-
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
151+
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
152152
}, {
153-
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
153+
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
154154
variants: ['dark:focus-visible']
155155
}, {
156-
pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
156+
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
157157
variants: ['focus-visible']
158158
}],
159159
range: (colorsAsRegex) => [{
160-
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
160+
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
161161
variants: ['dark']
162162
}, {
163-
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
163+
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
164164
}, {
165-
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
165+
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
166166
variants: ['dark']
167167
}, {
168-
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
168+
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
169169
}, {
170-
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
170+
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
171171
variants: ['dark:focus-visible']
172172
}, {
173-
pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
173+
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
174174
variants: ['focus-visible']
175175
}],
176176
progress: (colorsAsRegex) => [{
177-
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
177+
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
178178
variants: ['dark']
179179
}, {
180-
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
180+
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
181181
}],
182182
meter: (colorsAsRegex) => [{
183-
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
183+
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
184184
variants: ['dark']
185185
}, {
186-
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
186+
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
187187
}, {
188-
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
188+
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
189189
variants: ['dark']
190190
}, {
191-
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
191+
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
192192
}],
193193
notification: (colorsAsRegex) => [{
194-
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
194+
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
195195
variants: ['dark']
196196
}, {
197-
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
197+
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
198198
}, {
199-
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
199+
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
200200
variants: ['dark']
201201
}, {
202-
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
202+
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
203203
}],
204204
chip: (colorsAsRegex) => [{
205-
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
205+
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
206206
variants: ['dark']
207207
}, {
208-
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
208+
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
209209
}]
210210
}
211211

@@ -324,7 +324,15 @@ export const customSafelistExtractor = (prefix: string, content: string, colors:
324324

325325
return matches.map(match => {
326326
const colorOptions = match.substring(1, match.length - 1).split('|')
327-
return colorOptions.map(color => `${variant ? variant + ':' : ''}` + group.pattern.source.replace(match, color))
327+
return colorOptions.map(
328+
color => {
329+
const classesExtracted = group.pattern.source.replace(match, color).replace('^', '').replace('$', '')
330+
if (variant) {
331+
return `${variant}:${classesExtracted}`
332+
}
333+
return classesExtracted
334+
}
335+
)
328336
}).flat()
329337
})
330338
})

‎test/colors.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,17 @@ describe('generateSafelist', () => {
2424
[
2525
'default safelist',
2626
{}, [],
27-
['bg-(primary)-50', 'bg-(red)-500'] // these both should be in the safelist
27+
['^bg-(primary)-50$', '^bg-(red)-500$'] // these both should be in the safelist
2828
],
2929
[
3030
'safelisting single new color',
3131
{}, ['myColor'],
32-
'bg-(myColor|primary)-50'
32+
'^bg-(myColor|primary)-50$'
3333
],
3434
[
3535
'reducing amount of theme colors',
3636
{ theme: { colors: { plainBlue: '#00F' } } }, ['plainBlue'],
37-
['bg-(plainBlue|primary)-50', '!', /orange/] // the word "orange" should _not_ be found in any safelist pattern
37+
['^bg-(plainBlue|primary)-50$', '!', /orange/] // the word "orange" should _not_ be found in any safelist pattern
3838
]
3939
])('%s', async (_description, tailwindConfig: Partial<TWConfig>, safelistColors, safelistPatterns) => {
4040
safelistColors.push('primary')

0 commit comments

Comments
 (0)
Please sign in to comment.