From 4b7d947749fce8b446ab760e35fafacaede46129 Mon Sep 17 00:00:00 2001 From: Aron Date: Tue, 21 Jan 2025 01:55:30 +0800 Subject: [PATCH] Rename `stylesLayer` to `componentsLayer` for improved clarity and consistency --- internal | 2 +- packages/core/src/core.ts | 8 ++++---- packages/core/src/syntax-rule.ts | 2 +- packages/core/tests/test.ts | 2 +- packages/runtime/src/core.ts | 14 +++++++------- .../tests/progressive/comprehensive/test.ts | 2 +- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/internal b/internal index 3e86f4709..60026a833 160000 --- a/internal +++ b/internal @@ -1 +1 @@ -Subproject commit 3e86f47094a873e4700dbb0f4485081ee78a2404 +Subproject commit 60026a8337a55a016143b2a31889d77f5faa8c3c diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts index 747f9a1c4..37f9bc74c 100644 --- a/packages/core/src/core.ts +++ b/packages/core/src/core.ts @@ -25,7 +25,7 @@ export default class MasterCSS { readonly baseLayer = new SyntaxLayer('base', this) readonly themeLayer = new Layer('theme', this) readonly presetLayer = new SyntaxLayer('preset', this) - readonly stylesLayer = new SyntaxLayer('components', this) + readonly componentsLayer = new SyntaxLayer('components', this) readonly generalLayer = new SyntaxLayer('general', this) get text() { @@ -592,7 +592,7 @@ export default class MasterCSS { this.baseLayer.reset() this.themeLayer.reset() this.presetLayer.reset() - this.stylesLayer.reset() + this.componentsLayer.reset() this.generalLayer.reset() this.animationsNonLayer.reset() return this @@ -621,7 +621,7 @@ export default class MasterCSS { for (const className of classNames) { if (Object.prototype.hasOwnProperty.call(this.components, className)) { for (const eachSyntax of this.components[className]) { - this.stylesLayer.delete(className + ' ' + eachSyntax) + this.componentsLayer.delete(className + ' ' + eachSyntax) } } else { const atIndex = className.indexOf('@') @@ -630,7 +630,7 @@ export default class MasterCSS { if (Object.prototype.hasOwnProperty.call(this.components, name)) { const atToken = className.slice(atIndex) for (const eachSyntax of this.components[name]) { - this.stylesLayer.delete(eachSyntax + atToken + ' ' + className) + this.componentsLayer.delete(eachSyntax + atToken + ' ' + className) } } else { this.generalLayer.delete(className) diff --git a/packages/core/src/syntax-rule.ts b/packages/core/src/syntax-rule.ts index 17d4e0d25..e4a96fd05 100644 --- a/packages/core/src/syntax-rule.ts +++ b/packages/core/src/syntax-rule.ts @@ -474,7 +474,7 @@ export class SyntaxRule extends Rule { } if (this.fixedClass) { - this.layer = css.stylesLayer + this.layer = css.componentsLayer } } diff --git a/packages/core/tests/test.ts b/packages/core/tests/test.ts index 66945eebf..582539ad2 100644 --- a/packages/core/tests/test.ts +++ b/packages/core/tests/test.ts @@ -15,7 +15,7 @@ export const expectLayers = ( ) => { const css = new MasterCSS(customConfig).add(...(Array.isArray(className) ? className : [className])) if (layers.theme) expect(css.themeLayer.text).toContain(`@layer theme{${layers.theme ?? ''}}`) - if (layers.components) expect(css.stylesLayer.text).toContain(`@layer components{${layers.components ?? ''}}`) + if (layers.components) expect(css.componentsLayer.text).toContain(`@layer components{${layers.components ?? ''}}`) if (layers.preset) expect(css.presetLayer.text).toContain(`@layer preset{${layers.preset ?? ''}}`) if (layers.base) expect(css.baseLayer.text).toContain(`@layer base{${layers.base ?? ''}}`) if (layers.general) expect(css.generalLayer.text).toContain(`@layer general{${layers.general ?? ''}}`) diff --git a/packages/runtime/src/core.ts b/packages/runtime/src/core.ts index 29c0b9cad..34f9b662c 100644 --- a/packages/runtime/src/core.ts +++ b/packages/runtime/src/core.ts @@ -332,7 +332,7 @@ export class RuntimeCSS extends MasterCSS { handleSyntaxLayer(this.presetLayer) break case 'components': - this.stylesLayer.native = cssLayerBlockRule + this.componentsLayer.native = cssLayerBlockRule let stylePreText: string const createSyntaxRules = (cssRule: any): SyntaxRule[] | undefined => { if (cssRule.selectorText) { @@ -357,10 +357,10 @@ export class RuntimeCSS extends MasterCSS { for (const node of eachSyntaxRule.nodes) { if (!node.native && node.text.includes(stylePreText!)) { node.native = cssRule - if (!this.stylesLayer.rules.includes(eachSyntaxRule)) { - this.stylesLayer.rules.push(eachSyntaxRule) - this.stylesLayer.insertVariables(eachSyntaxRule) - this.stylesLayer.insertAnimations(eachSyntaxRule) + if (!this.componentsLayer.rules.includes(eachSyntaxRule)) { + this.componentsLayer.rules.push(eachSyntaxRule) + this.componentsLayer.insertVariables(eachSyntaxRule) + this.componentsLayer.insertAnimations(eachSyntaxRule) } matched = true break @@ -374,14 +374,14 @@ export class RuntimeCSS extends MasterCSS { console.error(`Cannot recognize the CSS rule in the components layer. \`${cssRule.cssText}\` (https://rc.css.master.co/messages/hydration-errors)`) } } - for (const eachRule of this.stylesLayer.rules) { + for (const eachRule of this.componentsLayer.rules) { for (let k = eachRule.nodes.length - 1; k >= 0; k--) { if (!eachRule.nodes[k].native) { eachRule.nodes.splice(k, 1) } } } - if (this.stylesLayer.rules.length) this.rules.push(this.stylesLayer) + if (this.componentsLayer.rules.length) this.rules.push(this.componentsLayer) break case 'general': handleSyntaxLayer(this.generalLayer) diff --git a/packages/runtime/tests/progressive/comprehensive/test.ts b/packages/runtime/tests/progressive/comprehensive/test.ts index 81398a1ca..894e89be5 100644 --- a/packages/runtime/tests/progressive/comprehensive/test.ts +++ b/packages/runtime/tests/progressive/comprehensive/test.ts @@ -47,7 +47,7 @@ describe('hydration', async () => { }) test('components', () => { - expect(runtimeCSS.stylesLayer.rules[0]).toMatchObject({ + expect(runtimeCSS.componentsLayer.rules[0]).toMatchObject({ name: '{inline-flex;bg:primary}', nodes: [ {