arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-21 15:31:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(module): reduce css bundle size by fixing safelist regex (#2005)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Yu Zhuohao
2024-08-03 01:02:39 +08:00
committed by GitHub
parent 3485092edb
commit 8ac9ca4978
2 changed files with 78 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/runtime/utils/colors.ts
View File

@@ -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$`)
}]
}
@@ -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()
})
})

6
test/colors.spec.ts
View File

@@ -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')