Refactor CSS style references in tests to use 'styles' instead of 'style' for consistency

1aron · 1aron · commit 0f962ffb53f2 · 2025-01-17T22:35:08.000+08:00
diff --git a/packages/cli/tests/extract/watch/test.ts b/packages/cli/tests/extract/watch/test.ts
@@ -92,7 +92,7 @@ it('change config file `styles` and reset process', async () => {
         waitForDataMatch(child, (data) => data.includes('exported'))
     ])
     const fileCSSText = fs.readFileSync(virtualCSSFilepath, { encoding: 'utf8' })
-    expect(fileCSSText).toContain(cssEscape('bg:blue'))
+    expect(fileCSSText).toContain('.btn{background-color:rgb(var(--blue))')
 }, 120000)
 
 it('change html file class attr and update', async () => {
diff --git a/packages/cli/tests/render/test.ts b/packages/cli/tests/render/test.ts
@@ -24,7 +24,7 @@ it('render css text into <head>', async () => {
             <head>
                 <link rel="styleSheet">
                 <style></style>
-            <style id="master">.font\\:32{font-size:2rem}.ml\\:0\\>\\:is\\(a\\,button\\)\\:first>:is(a,button):first-child{margin-left:0rem}.text\\:center{text-align:center}</style></head>
+            <style id="master">@layer base,theme,preset,styles,general;@layer general{.font\\:32{font-size:2rem}.ml\\:0\\>\\:is\\(a\\,button\\)\\:first>:is(a,button):first-child{margin-left:0rem}.text\\:center{text-align:center}}</style></head>
             <body>
                 <h1 class="text:center ml:0>:is(a,button):first font:32">Hello World</h1>
             </body>
@@ -53,7 +53,7 @@ it('render css text into head and create <style id="master">', async () => {
             <head>
                 <link rel="styleSheet">
                 <style></style>
-                <style id="master">.font\\:48{font-size:3rem}.top\\:10{top:0.625rem}</style>
+                <style id="master">@layer base,theme,preset,styles,general;@layer general{.font\\:48{font-size:3rem}.top\\:10{top:0.625rem}}</style>
             </head>
             <body>
                 <h1 class="top:10 font:48">Hello World</h1>
diff --git a/packages/core/tests/config/colors/test.ts b/packages/core/tests/config/colors/test.ts
@@ -202,7 +202,7 @@ test.concurrent('colors', () => {
     expectLayers(
         {
             theme: ':root{--primary-filled:0 0 0}.light{--primary-filled:255 255 255}.dark{--primary-filled:0 0 0}',
-            style: '.btn{background-color:rgb(var(--primary-filled))}'
+            styles: '.btn{background-color:rgb(var(--primary-filled))}'
         },
         'btn',
         {
diff --git a/packages/core/tests/config/styles/test.ts b/packages/core/tests/config/styles/test.ts
@@ -6,23 +6,23 @@ import { expectLayers } from '../../test'
 test.concurrent('styles', () => {
     expectLayers(
         {
-            style: '.btn{font-size:0.875rem;height:2.5rem;text-align:center}.light .btn{background-color:rgb(0 0 0);color:rgb(255 255 255);font-weight:600}.dark .btn{background-color:rgb(255 255 255);color:rgb(255 255 255);font-weight:500}'
+            styles: '.btn{font-size:0.875rem;height:2.5rem;text-align:center}.light .btn{background-color:rgb(0 0 0);color:rgb(255 255 255);font-weight:600}.dark .btn{background-color:rgb(255 255 255);color:rgb(255 255 255);font-weight:500}'
         },
         'btn',
         config
     )
 
     expectLayers(
         {
-            style: '.blue-btn{font-size:0.875rem;height:2.5rem;text-align:center}.light .blue-btn{background-color:rgb(0 0 0);color:rgb(255 255 255);font-weight:600;font-size:1.25rem}.dark .blue-btn{background-color:rgb(255 255 255);color:rgb(255 255 255);font-weight:500}'
+            styles: '.blue-btn{font-size:0.875rem;height:2.5rem;text-align:center}.light .blue-btn{background-color:rgb(0 0 0);color:rgb(255 255 255);font-weight:600;font-size:1.25rem}.dark .blue-btn{background-color:rgb(255 255 255);color:rgb(255 255 255);font-weight:500}'
         },
         'blue-btn',
         config
     )
 
     expectLayers(
         {
-            style: '.blue-btn{font-size:0.875rem!important;height:2.5rem!important;text-align:center!important}.light .blue-btn{background-color:rgb(0 0 0)!important;color:rgb(255 255 255)!important;font-weight:600!important;font-size:1.25rem!important}.dark .blue-btn{background-color:rgb(255 255 255)!important;color:rgb(255 255 255)!important;font-weight:500!important}'
+            styles: '.blue-btn{font-size:0.875rem!important;height:2.5rem!important;text-align:center!important}.light .blue-btn{background-color:rgb(0 0 0)!important;color:rgb(255 255 255)!important;font-weight:600!important;font-size:1.25rem!important}.dark .blue-btn{background-color:rgb(255 255 255)!important;color:rgb(255 255 255)!important;font-weight:500!important}'
         },
         'blue-btn',
         extend(config, { important: true })
@@ -31,7 +31,7 @@ test.concurrent('styles', () => {
     expectLayers(
         {
             theme: '.light,:root{--custom:0 0 0}.dark{--custom:255 255 255}',
-            style: '.highlight-numbers .highlight-line:before{content:counter(lineNumber);display:inline-block;counter-increment:lineNumber;padding-right:1rem;text-align:right;margin-left:-0.3125rem;color:rgb(var(--custom));width:1.875rem;font-size:80%}'
+            styles: '.highlight-numbers .highlight-line:before{content:counter(lineNumber);display:inline-block;counter-increment:lineNumber;padding-right:1rem;text-align:right;margin-left:-0.3125rem;color:rgb(var(--custom));width:1.875rem;font-size:80%}'
         },
         'highlight-numbers',
         {
diff --git a/packages/core/tests/contributions/jetsai.test.ts b/packages/core/tests/contributions/jetsai.test.ts
@@ -109,7 +109,7 @@ describe.concurrent('jetsai', () => {
 
         expectLayers(
             {
-                style: '.btn-primary{-webkit-text-fill-color:rgb(255 255 255);background-color:rgb(34 66 163)}.btn-primary:hover{background-color:rgb(21 37 89)}.btn-primary:disabled{-webkit-text-fill-color:rgb(146 151 161);background-color:rgb(205 224 247)}'
+                styles: '.btn-primary{-webkit-text-fill-color:rgb(255 255 255);background-color:rgb(34 66 163)}.btn-primary:hover{background-color:rgb(21 37 89)}.btn-primary:disabled{-webkit-text-fill-color:rgb(146 151 161);background-color:rgb(205 224 247)}'
             },
             'btn-primary',
             config
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -202,7 +202,7 @@ test.concurrent('colors', () => {`
`202`	`202`	`expectLayers(`
`203`	`203`	`{`
`204`	`204`	`theme: ':root{--primary-filled:0 0 0}.light{--primary-filled:255 255 255}.dark{--primary-filled:0 0 0}',`
`205`		`- style: '.btn{background-color:rgb(var(--primary-filled))}'`
	`205`	`+ styles: '.btn{background-color:rgb(var(--primary-filled))}'`
`206`	`206`	`},`
`207`	`207`	`'btn',`
`208`	`208`	`{`
Original file line number	Diff line number	Diff line change
`@@ -6,23 +6,23 @@ import { expectLayers } from '../../test'`
`6`	`6`	`test.concurrent('styles', () => {`
`7`	`7`	`expectLayers(`
`8`	`8`	`{`
`9`		`- style: '.btn{font-size:0.875rem;height:2.5rem;text-align:center}.light .btn{background-color:rgb(0 0 0);color:rgb(255 255 255);font-weight:600}.dark .btn{background-color:rgb(255 255 255);color:rgb(255 255 255);font-weight:500}'`
	`9`	`+ styles: '.btn{font-size:0.875rem;height:2.5rem;text-align:center}.light .btn{background-color:rgb(0 0 0);color:rgb(255 255 255);font-weight:600}.dark .btn{background-color:rgb(255 255 255);color:rgb(255 255 255);font-weight:500}'`
`10`	`10`	`},`
`11`	`11`	`'btn',`
`12`	`12`	`config`
`13`	`13`	`)`
`14`	`14`
`15`	`15`	`expectLayers(`
`16`	`16`	`{`
`17`		`- style: '.blue-btn{font-size:0.875rem;height:2.5rem;text-align:center}.light .blue-btn{background-color:rgb(0 0 0);color:rgb(255 255 255);font-weight:600;font-size:1.25rem}.dark .blue-btn{background-color:rgb(255 255 255);color:rgb(255 255 255);font-weight:500}'`
	`17`	`+ styles: '.blue-btn{font-size:0.875rem;height:2.5rem;text-align:center}.light .blue-btn{background-color:rgb(0 0 0);color:rgb(255 255 255);font-weight:600;font-size:1.25rem}.dark .blue-btn{background-color:rgb(255 255 255);color:rgb(255 255 255);font-weight:500}'`
`18`	`18`	`},`
`19`	`19`	`'blue-btn',`
`20`	`20`	`config`
`21`	`21`	`)`
`22`	`22`
`23`	`23`	`expectLayers(`
`24`	`24`	`{`
`25`		`- style: '.blue-btn{font-size:0.875rem!important;height:2.5rem!important;text-align:center!important}.light .blue-btn{background-color:rgb(0 0 0)!important;color:rgb(255 255 255)!important;font-weight:600!important;font-size:1.25rem!important}.dark .blue-btn{background-color:rgb(255 255 255)!important;color:rgb(255 255 255)!important;font-weight:500!important}'`
	`25`	`+ styles: '.blue-btn{font-size:0.875rem!important;height:2.5rem!important;text-align:center!important}.light .blue-btn{background-color:rgb(0 0 0)!important;color:rgb(255 255 255)!important;font-weight:600!important;font-size:1.25rem!important}.dark .blue-btn{background-color:rgb(255 255 255)!important;color:rgb(255 255 255)!important;font-weight:500!important}'`
`26`	`26`	`},`
`27`	`27`	`'blue-btn',`
`28`	`28`	`extend(config, { important: true })`
`@@ -31,7 +31,7 @@ test.concurrent('styles', () => {`
`31`	`31`	`expectLayers(`
`32`	`32`	`{`
`33`	`33`	`theme: '.light,:root{--custom:0 0 0}.dark{--custom:255 255 255}',`
`34`		`- style: '.highlight-numbers .highlight-line:before{content:counter(lineNumber);display:inline-block;counter-increment:lineNumber;padding-right:1rem;text-align:right;margin-left:-0.3125rem;color:rgb(var(--custom));width:1.875rem;font-size:80%}'`
	`34`	`+ styles: '.highlight-numbers .highlight-line:before{content:counter(lineNumber);display:inline-block;counter-increment:lineNumber;padding-right:1rem;text-align:right;margin-left:-0.3125rem;color:rgb(var(--custom));width:1.875rem;font-size:80%}'`
`35`	`35`	`},`
`36`	`36`	`'highlight-numbers',`
`37`	`37`	`{`
Original file line number	Diff line number	Diff line change
`@@ -109,7 +109,7 @@ describe.concurrent('jetsai', () => {`
`109`	`109`
`110`	`110`	`expectLayers(`
`111`	`111`	`{`
`112`		`- style: '.btn-primary{-webkit-text-fill-color:rgb(255 255 255);background-color:rgb(34 66 163)}.btn-primary:hover{background-color:rgb(21 37 89)}.btn-primary:disabled{-webkit-text-fill-color:rgb(146 151 161);background-color:rgb(205 224 247)}'`
	`112`	`+ styles: '.btn-primary{-webkit-text-fill-color:rgb(255 255 255);background-color:rgb(34 66 163)}.btn-primary:hover{background-color:rgb(21 37 89)}.btn-primary:disabled{-webkit-text-fill-color:rgb(146 151 161);background-color:rgb(205 224 247)}'`
`113`	`113`	`},`
`114`	`114`	`'btn-primary',`
`115`	`115`	`config`