Skip to content

Commit

Permalink
Fix(CSS): override doesn't work
Browse files Browse the repository at this point in the history
  • Loading branch information
@lesha1201
lesha1201 committed Nov 6, 2023
1 parent 07daad2 commit cab1bd0
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 65 deletions.
149 changes: 84 additions & 65 deletions packages/css/src/core.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export class MasterCSS {
if (!customConfig?.override) {
this.config = this.getExtendedConfig(defaultConfig, customConfig)
} else {
this.config = this.getExtendedConfig(this.config)
this.config = this.getExtendedConfig(customConfig)
}
this.resolve()
globalThis.masterCSSs.push(this)
Expand Down Expand Up @@ -370,79 +370,98 @@ export class MasterCSS {
})
}

const rulesEntries = Object.entries(rules)
.sort((a: any, b: any) => {
if (rules) {
const rulesEntries = Object.entries(rules).sort((a: any, b: any) => {
if (a[1].layer !== b[1].layer) {
return (b[1].layer || 0) - (a[1].layer || 0)
return (b[1].layer || 0) - (a[1].layer || 0)
}
return b[0].localeCompare(a[0])
})
const rulesEntriesLength = rulesEntries.length
const colorNames = Object.keys(colorVariableNames)
rulesEntries
.forEach(([id, eachRuleOptions]: [string, RuleOptions], index: number) => {
this.ruleOptions.push(eachRuleOptions)
eachRuleOptions.order = this.semanticRuleOptions.length + rulesEntriesLength - 1 - index
const match = eachRuleOptions.match
eachRuleOptions.id = id
if (
eachRuleOptions.layer === Layer.Native ||
eachRuleOptions.layer === Layer.NativeShorthand ||
eachRuleOptions.layer === CoreLayer.Native ||
eachRuleOptions.layer === CoreLayer.NativeShorthand
) {
eachRuleOptions.resolvedPropName = id.replace(/(?!^)[A-Z]/g, m => '-' + m).toLowerCase()
}
eachRuleOptions.resolvedVariables = {}
const addResolvedVariables = (prefix: string) => {
Object.assign(
eachRuleOptions.resolvedVariables,
Object.keys(this.variables)
.filter(eachVariableName => eachVariableName.startsWith(prefix + '-') || eachVariableName.startsWith('-' + prefix + '-'))
.reduce((newResolvedVariables, eachVariableName) => {
newResolvedVariables[eachVariableName.slice(prefix.length + (prefix.startsWith('-') ? 0 : 1))] = {
...this.variables[eachVariableName],
name: eachVariableName
}
return newResolvedVariables
}, {})
)
}
// 1. custom `config.rules[id].variableGroups`
if (eachRuleOptions.variableGroups) {
for (const eachVariableGroup of eachRuleOptions.variableGroups) {
addResolvedVariables(eachVariableGroup)
const rulesEntriesLength = rulesEntries.length
const colorNames = Object.keys(colorVariableNames)
rulesEntries.forEach(
([id, eachRuleOptions]: [string, RuleOptions], index: number) => {
this.ruleOptions.push(eachRuleOptions)
eachRuleOptions.order =
this.semanticRuleOptions.length + rulesEntriesLength - 1 - index
const match = eachRuleOptions.match
eachRuleOptions.id = id
if (
eachRuleOptions.layer === Layer.Native ||
eachRuleOptions.layer === Layer.NativeShorthand ||
eachRuleOptions.layer === CoreLayer.Native ||
eachRuleOptions.layer === CoreLayer.NativeShorthand
) {
eachRuleOptions.resolvedPropName = id
.replace(/(?!^)[A-Z]/g, (m) => '-' + m)
.toLowerCase()
}
}
// 2. custom `config.variables`
addResolvedVariables(id)

if (match) {
if (Array.isArray(match)) {
const [key, values = []] = match
const valueMatches = []
if (values.length) {
valueMatches.push(`(?:${values.join('|')})(?![a-zA-Z0-9-])`)
}
if (Object.keys(eachRuleOptions.resolvedVariables).length) {
valueMatches.push(`(?:${Object.keys(eachRuleOptions.resolvedVariables).join('|')})(?![a-zA-Z0-9-])`)
eachRuleOptions.resolvedVariables = {}
const addResolvedVariables = (prefix: string) => {
Object.assign(
eachRuleOptions.resolvedVariables,
Object.keys(this.variables)
.filter(
(eachVariableName) =>
eachVariableName.startsWith(prefix + '-') ||
eachVariableName.startsWith('-' + prefix + '-'),
)
.reduce((newResolvedVariables, eachVariableName) => {
newResolvedVariables[
eachVariableName.slice(
prefix.length + (prefix.startsWith('-') ? 0 : 1),
)
] = {
...this.variables[eachVariableName],
name: eachVariableName,
}
return newResolvedVariables
}, {}),
)
}
// 1. custom `config.rules[id].variableGroups`
if (eachRuleOptions.variableGroups) {
for (const eachVariableGroup of eachRuleOptions.variableGroups) {
addResolvedVariables(eachVariableGroup)
}
if (eachRuleOptions.colored) {
valueMatches.push(
'#',
'(?:color|color-contrast|color-mix|hwb|lab|lch|oklab|oklch|rgb|rgba|hsl|hsla)\\(.*\\)',
`(?:${colorNames.join('|')})(?![a-zA-Z0-9-])`
}
// 2. custom `config.variables`
addResolvedVariables(id)

if (match) {
if (Array.isArray(match)) {
const [key, values = []] = match
const valueMatches = []
if (values.length) {
valueMatches.push(`(?:${values.join('|')})(?![a-zA-Z0-9-])`)
}
if (Object.keys(eachRuleOptions.resolvedVariables).length) {
valueMatches.push(
`(?:${Object.keys(eachRuleOptions.resolvedVariables).join(
'|',
)})(?![a-zA-Z0-9-])`,
)
}
if (eachRuleOptions.colored) {
valueMatches.push(
'#',
'(?:color|color-contrast|color-mix|hwb|lab|lch|oklab|oklch|rgb|rgba|hsl|hsla)\\(.*\\)',
`(?:${colorNames.join('|')})(?![a-zA-Z0-9-])`,
)
}
if (eachRuleOptions.numeric) {
valueMatches.push('[\\d\\.]', '(?:max|min|calc|clamp)\\(.*\\)')
}
eachRuleOptions.resolvedMatch = new RegExp(
`^${key}:(?:${valueMatches.join('|')})[^|]*?(?:@|$)`,
)
} else {
eachRuleOptions.resolvedMatch = match as RegExp
}
if (eachRuleOptions.numeric) {
valueMatches.push('[\\d\\.]', '(?:max|min|calc|clamp)\\(.*\\)')
}
eachRuleOptions.resolvedMatch = new RegExp(`^${key}:(?:${valueMatches.join('|')})[^|]*?(?:@|$)`)
} else {
eachRuleOptions.resolvedMatch = match as RegExp
}
}
})
},
)
}
}

/**
Expand Down
20 changes: 20 additions & 0 deletions packages/css/tests/config/override/test.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Config, CoreLayer } from '../../../src'
import { testCSS } from '../../css'

const customConfig: Config = {
override: true,
rootSize: 10,
rules: {
fontSize: {
match: ['custom'],
numeric: true,
unit: 'rem',
layer: CoreLayer.Native,
},
},
}

test('override', () => {
testCSS('font:16', '', customConfig)
testCSS('custom:16', '.custom\\:16{font-size:1.6rem}', customConfig)
})

0 comments on commit cab1bd0

Please sign in to comment.