From cab1bd0c496b70a8042ec42e6685787c830d8167 Mon Sep 17 00:00:00 2001 From: Alexey Ryabov Date: Mon, 6 Nov 2023 18:01:35 +0300 Subject: [PATCH 1/2] 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) +}) From e8f697fef7dc67feee9bf3adda026ffaf42691bf Mon Sep 17 00:00:00 2001 From: Alexey Ryabov Date: Tue, 7 Nov 2023 20:22:09 +0300 Subject: [PATCH 2/2] Format code --- packages/css/src/core.ts | 163 ++++++++++----------- packages/css/tests/config/override/test.ts | 22 +-- 2 files changed, 90 insertions(+), 95 deletions(-) diff --git a/packages/css/src/core.ts b/packages/css/src/core.ts index 69a6ace1a..caee2e390 100644 --- a/packages/css/src/core.ts +++ b/packages/css/src/core.ts @@ -373,93 +373,88 @@ export class MasterCSS { 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 - }, {}), - ) + 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) } - // 1. custom `config.rules[id].variableGroups` - if (eachRuleOptions.variableGroups) { - for (const eachVariableGroup of eachRuleOptions.variableGroups) { - addResolvedVariables(eachVariableGroup) + } + // 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-])`) } - } - // 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('|')})[^|]*?(?:@|$)`, + if (Object.keys(eachRuleOptions.resolvedVariables).length) { + valueMatches.push( + `(?:${Object.keys(eachRuleOptions.resolvedVariables).join('|')})(?![a-zA-Z0-9-])`, ) - } else { - eachRuleOptions.resolvedMatch = match as RegExp } + 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 } - }, + } + }, ) } } @@ -1465,23 +1460,23 @@ export class MasterCSS { for (let i = 0; i < sheet.cssRules.length; i++) { const eachCssRule = sheet.cssRules[i] if ( - eachCssRule.constructor.name === 'CSSStyleRule' - && (eachCssRule as CSSStyleRule).style.length === 1 - && (eachCssRule as CSSStyleRule).style[0].startsWith('--') + eachCssRule.constructor.name === 'CSSStyleRule' + && (eachCssRule as CSSStyleRule).style.length === 1 + && (eachCssRule as CSSStyleRule).style[0].startsWith('--') && !(eachCssRule as CSSStyleRule).selectorText.startsWith('.\\$') ) continue if (eachCssRule.constructor.name !== 'CSSKeyframesRule') break - + if ((eachCssRule as CSSKeyframesRule).name === eachKeyframeName) { cssRule = eachCssRule break } } } - + if (cssRule) { nativeRule.cssRule = cssRule } else { @@ -1552,8 +1547,8 @@ export class MasterCSS { const eachCssRule = sheet.cssRules[i] if ( eachCssRule.constructor.name !== 'CSSStyleRule' - || (eachCssRule as CSSStyleRule).style.length !== 1 - || !(eachCssRule as CSSStyleRule).style[0].startsWith('--') + || (eachCssRule as CSSStyleRule).style.length !== 1 + || !(eachCssRule as CSSStyleRule).style[0].startsWith('--') || (eachCssRule as CSSStyleRule).selectorText.startsWith('.\\$') ) break diff --git a/packages/css/tests/config/override/test.ts b/packages/css/tests/config/override/test.ts index 06f962d8a..3d113addd 100644 --- a/packages/css/tests/config/override/test.ts +++ b/packages/css/tests/config/override/test.ts @@ -2,19 +2,19 @@ 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, + 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) + testCSS('font:16', '', customConfig) + testCSS('custom:16', '.custom\\:16{font-size:1.6rem}', customConfig) })