Skip to content

Commit

Permalink
fix(module): reduce css bundle size by fixing safelist regex (nuxt#2005)
Browse files Browse the repository at this point in the history 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
  • Loading branch information
@yuzh2001 @benjamincanac @binhth-1206
2 people authored and binhth-1206 committed Aug 3, 2024
1 parent 4d70c0f commit 5a136de
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 70 deletions.
142 changes: 75 additions & 67 deletions src/runtime/utils/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,193 +19,193 @@ const colorsToExclude = [

const safelistByComponent: Record<string, (colors: string) => TWConfig['safelist']> = {
alert: (colorsAsRegex) => [{
pattern: new RegExp(`bg-(${colorsAsRegex})-50`)
pattern: RegExp(`^bg-(${colorsAsRegex})-50$`)
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-500`)
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`)
}],
avatar: (colorsAsRegex) => [{
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
}],
badge: (colorsAsRegex) => [{
pattern: new RegExp(`bg-(${colorsAsRegex})-50`)
pattern: RegExp(`^bg-(${colorsAsRegex})-50$`)
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-500`)
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`)
}],
button: (colorsAsRegex) => [{
pattern: new RegExp(`bg-(${colorsAsRegex})-50`),
pattern: RegExp(`^bg-(${colorsAsRegex})-50$`),
variants: ['hover', 'disabled']
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-100`),
pattern: RegExp(`^bg-(${colorsAsRegex})-100$`),
variants: ['hover']
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
variants: ['dark', 'dark:disabled']
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-500`),
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`),
variants: ['disabled', 'dark:hover']
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-600`),
pattern: RegExp(`^bg-(${colorsAsRegex})-600$`),
variants: ['hover']
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-900`),
pattern: RegExp(`^bg-(${colorsAsRegex})-900$`),
variants: ['dark:hover']
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-950`),
pattern: RegExp(`^bg-(${colorsAsRegex})-950$`),
variants: ['dark', 'dark:hover', 'dark:disabled']
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
variants: ['dark', 'dark:disabled']
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-500`),
pattern: RegExp(`^text-(${colorsAsRegex})-500$`),
variants: ['dark:hover', 'disabled']
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-600`),
pattern: RegExp(`^text-(${colorsAsRegex})-600$`),
variants: ['hover']
}, {
pattern: new RegExp(`outline-(${colorsAsRegex})-400`),
pattern: RegExp(`^outline-(${colorsAsRegex})-400$`),
variants: ['dark:focus-visible']
}, {
pattern: new RegExp(`outline-(${colorsAsRegex})-500`),
pattern: RegExp(`^outline-(${colorsAsRegex})-500$`),
variants: ['focus-visible']
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
variants: ['dark:focus-visible']
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
variants: ['focus-visible']
}],
input: (colorsAsRegex) => [{
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
variants: ['dark', 'dark:focus']
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
variants: ['focus']
}],
radio: (colorsAsRegex) => [{
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
variants: ['dark:focus-visible']
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
variants: ['focus-visible']
}],
checkbox: (colorsAsRegex) => [{
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
variants: ['dark:focus-visible']
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
variants: ['focus-visible']
}],
toggle: (colorsAsRegex) => [{
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
variants: ['dark:focus-visible']
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
variants: ['focus-visible']
}],
range: (colorsAsRegex) => [{
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
pattern: RegExp(`^ring-(${colorsAsRegex})-400$`),
variants: ['dark:focus-visible']
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
pattern: RegExp(`^ring-(${colorsAsRegex})-500$`),
variants: ['focus-visible']
}],
progress: (colorsAsRegex) => [{
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
}],
meter: (colorsAsRegex) => [{
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
}],
notification: (colorsAsRegex) => [{
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
pattern: RegExp(`^text-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
pattern: RegExp(`^text-(${colorsAsRegex})-500$`)
}],
chip: (colorsAsRegex) => [{
pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
pattern: RegExp(`^bg-(${colorsAsRegex})-400$`),
variants: ['dark']
}, {
pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
pattern: RegExp(`^bg-(${colorsAsRegex})-500$`)
}]
}

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

return matches.map(match => {
const colorOptions = match.substring(1, match.length - 1).split('|')
return colorOptions.map(color => `${variant ? variant + ':' : ''}` + group.pattern.source.replace(match, color))
return colorOptions.map(
color => {
const classesExtracted = group.pattern.source.replace(match, color).replace('^', '').replace('$', '')
if (variant) {
return `${variant}:${classesExtracted}`
}
return classesExtracted
}
)
}).flat()
})
})
Expand Down
6 changes: 3 additions & 3 deletions test/colors.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,17 @@ describe('generateSafelist', () => {
[
'default safelist',
{}, [],
['bg-(primary)-50', 'bg-(red)-500'] // these both should be in the safelist
['^bg-(primary)-50$', '^bg-(red)-500$'] // these both should be in the safelist
],
[
'safelisting single new color',
{}, ['myColor'],
'bg-(myColor|primary)-50'
'^bg-(myColor|primary)-50$'
],
[
'reducing amount of theme colors',
{ theme: { colors: { plainBlue: '#00F' } } }, ['plainBlue'],
['bg-(plainBlue|primary)-50', '!', /orange/] // the word "orange" should _not_ be found in any safelist pattern
['^bg-(plainBlue|primary)-50$', '!', /orange/] // the word "orange" should _not_ be found in any safelist pattern
]
])('%s', async (_description, tailwindConfig: Partial<TWConfig>, safelistColors, safelistPatterns) => {
safelistColors.push('primary')
Expand Down

0 comments on commit 5a136de

Please sign in to comment.