Rename stylesLayer to componentsLayer for improved clarity and consistency

Author: 1aron

internal

@@ -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)

packages/core/src/core.ts

@@ -474,7 +474,7 @@ export class SyntaxRule extends Rule {
         }
 
         if (this.fixedClass) {
-            this.layer = css.stylesLayer
+            this.layer = css.componentsLayer
         }
     }
 

packages/core/src/syntax-rule.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 ?? ''}}`)

packages/core/tests/test.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)

packages/runtime/src/core.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: [
                 {