Rename normalLayer to generalLayer

packages/core/src/core.ts

@@ -30,18 +30,18 @@ export default class MasterCSS {
     readonly syntaxes: RegisteredSyntax[] = []
     readonly config: Config
     readonly classesUsage: Record<string, number> = {}
-    readonly layerStatementRule = new Rule('layer-statement', this, [{ text: '@layer base,theme,preset,styles,normal;' }])
+    readonly layerStatementRule = new Rule('layer-statement', this, [{ text: '@layer base,theme,preset,styles,general;' }])
     readonly rules: (Layer | Rule)[] = [this.layerStatementRule]
     readonly animationsLayer = new AnonymousLayer(this)
     readonly themeLayer = new Layer('theme', this)
     readonly presetLayer = new SyntaxLayer('preset', this)
     readonly stylesLayer = new SyntaxLayer('styles', this)
-    readonly normalLayer = new SyntaxLayer('normal', this)
+    readonly generalLayer = new SyntaxLayer('general', this)
 
     get text() {
         return this.rules
             .sort((a, b) => {
-                const order = ['layer-statement', 'base', 'theme', 'preset', 'styles', 'normal']
+                const order = ['layer-statement', 'base', 'theme', 'preset', 'styles', 'general']
                 const indexA = order.indexOf(a.name) === -1 ? Infinity : order.indexOf(a.name)
                 const indexB = order.indexOf(b.name) === -1 ? Infinity : order.indexOf(b.name)
                 return indexA - indexB
@@ -533,7 +533,7 @@ export default class MasterCSS {
      * @returns SyntaxRule
      */
     create(className: string, fixedClass?: string, mode?: string): SyntaxRule | undefined {
-        const syntaxRule = this.normalLayer.rules.find(({ key }) => key === ((fixedClass ? fixedClass + ' ' : '') + className))
+        const syntaxRule = this.generalLayer.rules.find(({ key }) => key === ((fixedClass ? fixedClass + ' ' : '') + className))
         if (syntaxRule) return syntaxRule
         const registeredRule = this.match(className)
         if (registeredRule) return new SyntaxRule(className, this, registeredRule, fixedClass, mode)
@@ -565,7 +565,7 @@ export default class MasterCSS {
     }
 
     reset() {
-        this.normalLayer.reset()
+        this.generalLayer.reset()
         this.stylesLayer.reset()
         this.presetLayer.reset()
         this.themeLayer.reset()
@@ -609,10 +609,10 @@ export default class MasterCSS {
                             this.stylesLayer.delete(eachSyntax + atToken + ' ' + className)
                         }
                     } else {
-                        this.normalLayer.delete(className)
+                        this.generalLayer.delete(className)
                     }
                 } else {
-                    this.normalLayer.delete(className)
+                    this.generalLayer.delete(className)
                 }
             }
         }

packages/core/src/syntax-rule.ts

@@ -28,7 +28,7 @@ export class SyntaxRule extends Rule {
     ) {
         super(name, css)
         this.mode = mode as string
-        this.layer = css.normalLayer
+        this.layer = css.generalLayer
         Object.assign(this, registeredSyntax)
         const { id, definition } = registeredSyntax
         const { analyze, transformValue, declare, transformValueComponents, create, type, unit } = definition

packages/core/src/utils/reorder-for-readable-classes.ts

@@ -9,7 +9,7 @@ import MasterCSS from '../core'
  */
 export default function reorderForReadableClasses(classes: string[], css = new MasterCSS()) {
     css.add(...classes)
-    const orderedClasses = css.normalLayer.rules
+    const orderedClasses = css.generalLayer.rules
         // 只保留樣式語法相關的 syntaxes, 排除 keyframes 與 variables 在外
         .filter(eachRule => eachRule.type)
         .sort((a, b) => {

packages/core/tests/at.test.ts

@@ -3,7 +3,7 @@ import { MasterCSS } from '../src'
 
 test.concurrent('media', () => {
     const css = new MasterCSS().add('font:12@sm&<md')
-    expect(css.normalLayer.rules[0].at).toEqual({
+    expect(css.generalLayer.rules[0].at).toEqual({
         'media': [
             {
                 'name': 'min-width',
@@ -26,7 +26,7 @@ test.concurrent('media', () => {
             },
         ],
     })
-    expect(css.normalLayer.rules[0].text).toContain('(min-width:834px) and (max-width:1023.98px)')
+    expect(css.generalLayer.rules[0].text).toContain('(min-width:834px) and (max-width:1023.98px)')
 
     // expect(new MasterCSS().generate('font:12@supports(display:grid)')[0].at).toEqual({
     //     'supports': '(display:grid)',

packages/core/tests/config/colors/hex.test.ts

@@ -55,7 +55,7 @@ describe.concurrent('with themes', () => {
         expectLayers(
             {
                 theme: ':root{--primary:0 0 0}.dark{--primary:255 255 255}.light{--primary:150 150 150}.chrisma{--primary:0 0 0 / .5}',
-                normal: '.fg\\:primary{color:rgb(var(--primary))}'
+                general: '.fg\\:primary{color:rgb(var(--primary))}'
             },
             'fg:primary',
             config
@@ -66,7 +66,7 @@ describe.concurrent('with themes', () => {
         expectLayers(
             {
                 theme: ':root{--primary:0 0 0}.dark{--primary:255 255 255}.light{--primary:150 150 150}.chrisma{--primary:0 0 0 / .5}',
-                normal: '.fg\\:primary\\/\\.5{color:rgb(var(--primary)/.5)}'
+                general: '.fg\\:primary\\/\\.5{color:rgb(var(--primary)/.5)}'
             },
             'fg:primary/.5',
             config

packages/core/tests/config/colors/hsl.test.ts

@@ -57,7 +57,7 @@ describe.concurrent('with themes', () => {
         expectLayers(
             {
                 theme: ':root{--primary:0deg 0% 0%}.dark{--primary:0deg 0% 100%}.light{--primary:0deg 0% 58.82%}.chrisma{--primary:0deg 0% 0%/.5}',
-                normal: '.fg\\:primary{color:hsl(var(--primary))}'
+                general: '.fg\\:primary{color:hsl(var(--primary))}'
             },
             'fg:primary',
             config
@@ -68,7 +68,7 @@ describe.concurrent('with themes', () => {
         expectLayers(
             {
                 theme: ':root{--primary:0deg 0% 0%}.dark{--primary:0deg 0% 100%}.light{--primary:0deg 0% 58.82%}.chrisma{--primary:0deg 0% 0%/.5}',
-                normal: '.fg\\:primary\\/\\.5{color:hsl(var(--primary)/.5)}'
+                general: '.fg\\:primary\\/\\.5{color:hsl(var(--primary)/.5)}'
             },
             'fg:primary/.5',
             config

packages/core/tests/config/colors/modes.test.ts

@@ -5,7 +5,7 @@ test.concurrent('modes and scale', () => {
     expectLayers(
         {
             theme: '.light,:root{--primary:0 0 0}.dark{--primary:255 255 255}',
-            normal: '.fg\\:primary-10{color:rgb(238 238 238)}.fg\\:primary{color:rgb(var(--primary))}'
+            general: '.fg\\:primary-10{color:rgb(238 238 238)}.fg\\:primary{color:rgb(var(--primary))}'
         },
         ['fg:primary', 'fg:primary-10'],
         {

packages/core/tests/config/colors/test.ts

@@ -7,7 +7,7 @@ test.concurrent('colors', () => {
     expectLayers(
         {
             theme: ':root{--primary:0 0 0}.light{--primary:0 0 0}.dark{--primary:255 255 255}',
-            normal: '.fg\\:primary{color:rgb(var(--primary))}'
+            general: '.fg\\:primary{color:rgb(var(--primary))}'
         },
         'fg:primary',
         config
@@ -16,7 +16,7 @@ test.concurrent('colors', () => {
     expectLayers(
         {
             theme: ':root{--primary-code:0 0 0}.dark{--primary-code:255 255 255}',
-            normal: '.fg\\:primary-code{color:rgb(var(--primary-code))}'
+            general: '.fg\\:primary-code{color:rgb(var(--primary-code))}'
         },
         'fg:primary-code',
         config
@@ -25,23 +25,23 @@ test.concurrent('colors', () => {
     expectLayers(
         {
             theme: ':root{--primary-stage-1:255 255 255}.light{--primary-stage-1:0 0 0}.dark{--primary-stage-1:255 255 255}',
-            normal: '.fg\\:primary-stage-1{color:rgb(var(--primary-stage-1))}'
+            general: '.fg\\:primary-stage-1{color:rgb(var(--primary-stage-1))}'
         },
         'fg:primary-stage-1',
         config
     )
 
     expectLayers(
         {
-            normal: '.b\\:input{border-color:rgb(18 52 86)}'
+            general: '.b\\:input{border-color:rgb(18 52 86)}'
         },
         'b:input',
         config
     )
 
     expectLayers(
         {
-            normal: '.bg\\:blue-100{background-color:rgb(119 119 119)}'
+            general: '.bg\\:blue-100{background-color:rgb(119 119 119)}'
         },
         'bg:blue-100',
         {
@@ -53,47 +53,47 @@ test.concurrent('colors', () => {
 
     expectLayers(
         {
-            normal: '.bg\\:primary-alpha{background-color:rgb(255 255 255 / .1)}'
+            general: '.bg\\:primary-alpha{background-color:rgb(255 255 255 / .1)}'
         },
         'bg:primary-alpha',
         config
     )
 
     expectLayers(
         {
-            normal: '.bg\\:primary-rgb1{background-color:rgb(0 0 0)}'
+            general: '.bg\\:primary-rgb1{background-color:rgb(0 0 0)}'
         },
         'bg:primary-rgb1',
         config
     )
 
     expectLayers(
         {
-            normal: '.bg\\:primary-rgb2{background-color:rgb(0 0 0)}'
+            general: '.bg\\:primary-rgb2{background-color:rgb(0 0 0)}'
         },
         'bg:primary-rgb2',
         config
     )
 
     expectLayers(
         {
-            normal: '.bg\\:primary-rgb3{background-color:rgb(0 0 0 / .5)}'
+            general: '.bg\\:primary-rgb3{background-color:rgb(0 0 0 / .5)}'
         },
         'bg:primary-rgb3',
         config
     )
 
     expectLayers(
         {
-            normal: '.bg\\:primary-rgb4{background-color:rgb(0 0 0 / .5)}'
+            general: '.bg\\:primary-rgb4{background-color:rgb(0 0 0 / .5)}'
         },
         'bg:primary-rgb4',
         config
     )
 
     expectLayers(
         {
-            normal: '.bg\\:primary-2{background-color:rgb(0 0 0 / .35)}'
+            general: '.bg\\:primary-2{background-color:rgb(0 0 0 / .35)}'
         },
         'bg:primary-2',
         config
@@ -102,7 +102,7 @@ test.concurrent('colors', () => {
     expectLayers(
         {
             theme: '.light,:root{--major:0 0 0}.dark{--major:255 255 255}',
-            normal: '.bg\\:linear-gradient\\(180deg\\,major\\,black\\){background-image:linear-gradient(180deg,rgb(var(--major)),rgb(0 0 0))}'
+            general: '.bg\\:linear-gradient\\(180deg\\,major\\,black\\){background-image:linear-gradient(180deg,rgb(var(--major)),rgb(0 0 0))}'
         },
         'bg:linear-gradient(180deg,major,black)',
         config
@@ -111,7 +111,7 @@ test.concurrent('colors', () => {
     expectLayers(
         {
             theme: '.light,:root{--primary:0 0 0}.dark{--primary:255 255 255}.light,:root{--accent:17 17 17}.dark{--accent:238 238 238}',
-            normal: '.bg\\:linear-gradient\\(180deg\\,primary\\,accent\\){background-image:linear-gradient(180deg,rgb(var(--primary)),rgb(var(--accent)))}'
+            general: '.bg\\:linear-gradient\\(180deg\\,primary\\,accent\\){background-image:linear-gradient(180deg,rgb(var(--primary)),rgb(var(--accent)))}'
         },
         'bg:linear-gradient(180deg,primary,accent)',
         {
@@ -131,7 +131,7 @@ test.concurrent('colors', () => {
     expectLayers(
         {
             theme: '.light,:root{--primary:0 0 0}.dark{--primary:255 255 255}.dark{--accent:238 238 238}',
-            normal: '.bg\\:linear-gradient\\(180deg\\,primary\\,accent\\){background-image:linear-gradient(180deg,rgb(var(--primary)),rgb(var(--accent)))}'
+            general: '.bg\\:linear-gradient\\(180deg\\,primary\\,accent\\){background-image:linear-gradient(180deg,rgb(var(--primary)),rgb(var(--accent)))}'
         },
         'bg:linear-gradient(180deg,primary,accent)',
         {
@@ -150,7 +150,7 @@ test.concurrent('colors', () => {
     expectLayers(
         {
             theme: '.light,:root{--primary:0 0 0}.dark{--primary:255 255 255}',
-            normal: '.bg\\:linear-gradient\\(180deg\\,primary\\,accent\\){background-image:linear-gradient(180deg,rgb(var(--primary)),accent)}'
+            general: '.bg\\:linear-gradient\\(180deg\\,primary\\,accent\\){background-image:linear-gradient(180deg,rgb(var(--primary)),accent)}'
         },
         'bg:linear-gradient(180deg,primary,accent)',
         {
@@ -166,7 +166,7 @@ test.concurrent('colors', () => {
     expectLayers(
         {
             theme: '.light,:root{--primary:0 0 0}.dark{--primary:255 255 255}:root{--accent:255 0 0}.dark{--accent:170 0 0}',
-            normal: '.bg\\:linear-gradient\\(180deg\\,primary\\,accent\\){background-image:linear-gradient(180deg,rgb(var(--primary)),rgb(var(--accent)))}'
+            general: '.bg\\:linear-gradient\\(180deg\\,primary\\,accent\\){background-image:linear-gradient(180deg,rgb(var(--primary)),rgb(var(--accent)))}'
         },
         'bg:linear-gradient(180deg,primary,accent)',
         {
@@ -186,7 +186,7 @@ test.concurrent('colors', () => {
     expectLayers(
         {
             theme: '.light,:root{--fade:204 204 204}.dark{--fade:51 51 51}',
-            normal: '.\\{block\\;fg\\:fade\\}_\\:where\\(p\\)_code\\:before :where(p) code:before{display:block;color:rgb(var(--fade))}'
+            general: '.\\{block\\;fg\\:fade\\}_\\:where\\(p\\)_code\\:before :where(p) code:before{display:block;color:rgb(var(--fade))}'
         },
         '{block;fg:fade}_:where(p)_code:before',
         {
@@ -224,7 +224,7 @@ test.concurrent('colors', () => {
     expectLayers(
         {
             theme: ':root{--primary-filled:0 0 0}.light{--primary-filled:255 255 255}.dark{--primary-filled:0 0 0}',
-            normal: '.bg\\:primary-filled{background-color:rgb(var(--primary-filled))}'
+            general: '.bg\\:primary-filled{background-color:rgb(var(--primary-filled))}'
         },
         'bg:primary-filled',
         {
@@ -245,7 +245,7 @@ test.concurrent('colors', () => {
 
     expectLayers(
         {
-            normal: '.dark .bg\\:primary-filled\\@dark{background-color:rgb(255 255 255)}'
+            general: '.dark .bg\\:primary-filled\\@dark{background-color:rgb(255 255 255)}'
         },
         'bg:primary-filled@dark',
         {
@@ -267,7 +267,7 @@ test.concurrent('colors', () => {
     expectLayers(
         {
             theme: '.light,:root{--code:0 0 0}.dark{--code:255 255 255}',
-            normal: '.bg\\:code{background-color:rgb(var(--code))}'
+            general: '.bg\\:code{background-color:rgb(var(--code))}'
         },
         'bg:code',
         config
@@ -276,7 +276,7 @@ test.concurrent('colors', () => {
     expectLayers(
         {
             theme: '.light,:root{--code:0 0 0}.dark{--code:255 255 255}',
-            normal: '.bg\\:code\\/\\.5{background-color:rgb(var(--code)/.5)}'
+            general: '.bg\\:code\\/\\.5{background-color:rgb(var(--code)/.5)}'
         },
         'bg:code/.5',
         config
@@ -285,7 +285,7 @@ test.concurrent('colors', () => {
     expectLayers(
         {
             theme: '.light,:root{--fade-light:0 0 0}',
-            normal: '.bg\\:fade-light{background-color:rgb(var(--fade-light))}'
+            general: '.bg\\:fade-light{background-color:rgb(var(--fade-light))}'
         },
         'bg:fade-light',
         config
@@ -295,7 +295,7 @@ test.concurrent('colors', () => {
 it.concurrent('checks if similar color names collide.', () => {
     expectLayers(
         {
-            normal: '.fg\\:a-1{color:rgb(0 0 0)}'
+            general: '.fg\\:a-1{color:rgb(0 0 0)}'
         },
         'fg:a-1',
         {

packages/core/tests/config/modes.test.ts

@@ -6,7 +6,7 @@ test.concurrent('modes', () => {
     expectLayers(
         {
             theme: '.dark{--fade:51 51 51}',
-            normal: '.\\{block\\;fg\\:fade\\}_\\:where\\(p\\)_code\\:before :where(p) code:before{display:block;color:rgb(var(--fade))}'
+            general: '.\\{block\\;fg\\:fade\\}_\\:where\\(p\\)_code\\:before :where(p) code:before{display:block;color:rgb(var(--fade))}'
         },
         '{block;fg:fade}_:where(p)_code:before',
         {