Skip to content

Commit

Permalink
fix(module): safelist aliases for input
Browse files Browse the repository at this point in the history
To make it work when doing `<USelect color="yellow" />` for example
  • Loading branch information
benjamincanac committed Jun 21, 2023
1 parent 3bac087 commit f719111
Showing 1 changed file with 29 additions and 12 deletions.
41 changes: 29 additions & 12 deletions src/colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,11 @@ const safelistByComponent = {
variants: ['focus-visible']
}],
input: (colorsAsRegex) => [{
pattern: new RegExp(`text-(${colorsAsRegex})-400`),
variants: ['dark']
}, {
pattern: new RegExp(`text-(${colorsAsRegex})-500`)
}, {
pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
variants: ['dark', 'dark:focus']
}, {
Expand All @@ -111,6 +116,12 @@ const safelistByComponent = {
}]
}

const safelistComponentAliasesMap = {
'USelect': 'UInput',
'USelectMenu': 'UInput',
'UTextarea': 'UInput'
}

const colorsAsRegex = (colors: string[]): string => colors.join('|')

export const excludeColors = (colors: object) => Object.keys(omit(colors, colorsToExclude)).map(color => kebabCase(color)) as string[]
Expand All @@ -133,29 +144,35 @@ export const customSafelistExtractor = (prefix, content: string, colors: string[
const regex = /<(\w+)\s+[^>:]*color=["']([^"']+)["'][^>]*>/gs
const matches = content.matchAll(regex)

const components = Object.keys(safelistByComponent).map(component => `${prefix}${component.charAt(0).toUpperCase() + component.slice(1)}`)

for (const match of matches) {
const [, component, color] = match

if (!colors.includes(color)) {
continue
}

if (Object.keys(safelistByComponent).map(component => `${prefix}${component.charAt(0).toUpperCase() + component.slice(1)}`).includes(component)) {
const name = component.replace(prefix, '').toLowerCase()
let name = safelistComponentAliasesMap[component] ? safelistComponentAliasesMap[component] : component

if (!components.includes(name)) {
continue
}

name = name.replace(prefix, '').toLowerCase()

const matchClasses = safelistByComponent[name](color).flatMap(group => {
return ['', ...(group.variants || [])].flatMap(variant => {
const matches = group.pattern.source.match(/\(([^)]+)\)/g)
const matchClasses = safelistByComponent[name](color).flatMap(group => {
return ['', ...(group.variants || [])].flatMap(variant => {
const matches = group.pattern.source.match(/\(([^)]+)\)/g)

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))
}).flat()
})
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))
}).flat()
})
})

classes.push(...matchClasses)
}
classes.push(...matchClasses)
}

return classes
Expand Down

0 comments on commit f719111

Please sign in to comment.