From cab1bd0c496b70a8042ec42e6685787c830d8167 Mon Sep 17 00:00:00 2001 From: Alexey Ryabov Date: Mon, 6 Nov 2023 18:01:35 +0300 Subject: [PATCH] Fix(CSS): `override` doesn't work --- packages/css/src/core.ts | 149 ++++++++++++--------- packages/css/tests/config/override/test.ts | 20 +++ 2 files changed, 104 insertions(+), 65 deletions(-) create mode 100644 packages/css/tests/config/override/test.ts diff --git a/packages/css/src/core.ts b/packages/css/src/core.ts index f0de061c3..69a6ace1a 100644 --- a/packages/css/src/core.ts +++ b/packages/css/src/core.ts @@ -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) @@ -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 } - } - }) + }, + ) + } } /** diff --git a/packages/css/tests/config/override/test.ts b/packages/css/tests/config/override/test.ts new file mode 100644 index 000000000..06f962d8a --- /dev/null +++ b/packages/css/tests/config/override/test.ts @@ -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) +})