Skip to content

Commit

Permalink
Merge branch 'dev' into feat/reuse-reserved-colors
Browse files Browse the repository at this point in the history 
* dev:
  fix(module): reduce css bundle size by fixing safelist regex (nuxt#2005)
  fix(useFormGroup): app config default input size (nuxt#2011)
  • Loading branch information
@davestewart
davestewart committed Aug 2, 2024
2 parents 604f359 + 8ac9ca4 commit 3474468
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 77 deletions.
8 changes: 1 addition & 7 deletions src/runtime/composables/useFormGroup.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import { inject, ref, computed } from 'vue'
import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
import type { FormEvent, FormEventType, InjectedFormGroupValue } from '../types/form'
import { mergeConfig } from '../utils'
// @ts-expect-error
import appConfig from '#build/app.config'
import { formGroup } from '#ui/ui.config'

type InputProps = {
id?: string
Expand All @@ -16,8 +12,6 @@ type InputProps = {
}


const formGroupConfig = mergeConfig<typeof formGroup>(appConfig.ui.strategy, appConfig.ui.formGroup, formGroup)

export const useFormGroup = (inputProps?: InputProps, config?: any) => {
const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
const formGroup = inject<InjectedFormGroupValue | undefined>('form-group', undefined)
Expand Down Expand Up @@ -62,7 +56,7 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
name: computed(() => inputProps?.name ?? formGroup?.name.value),
size: computed(() => {
const formGroupSize = config.size[formGroup?.size.value as string] ? formGroup?.size.value : null
return inputProps?.size ?? formGroupSize ?? formGroupConfig?.default?.size
return inputProps?.size ?? formGroupSize ?? config.default?.size
}),
color: computed(() => formGroup?.error?.value ? 'red' : inputProps?.color),
emitFormBlur,
Expand Down
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 @@ -335,7 +335,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 3474468

Please sign in to comment.