Support cascade @layer (#313)

* chore: add failing test * feat: support @layer queries * chore: ignore yarn lock * chore: remove whitespace changes from test file * reorder cases * test: add additional tests * test: add failing test for standalone @import-like syntax * feat: add LAYER env variable * feat: handle @layer rules without children * chore: add code comment * minify code a little bit * remove redundant testing util * add extra test cases mixing layer and media * add an extra test case mixing layer and keyframes * adjust style * tweak test title --------- Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
thysultan · May 5, 2023 · 5d1b084 · 5d1b084
1 parent 1466416
commit 5d1b084
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,3 +16,4 @@ coverage
 .nyc_output
 dist/
 package-lock.json
+yarn.lock
diff --git a/src/Enum.js b/src/Enum.js
@@ -18,3 +18,4 @@ export var KEYFRAMES = '@keyframes'
 export var FONT_FACE = '@font-face'
 export var COUNTER_STYLE = '@counter-style'
 export var FONT_FEATURE_VALUES = '@font-feature-values'
+export var LAYER = '@layer'
diff --git a/src/Parser.js b/src/Parser.js
@@ -94,8 +94,8 @@ export function parse (value, root, parent, rule, rules, rulesets, pseudo, point
 								parse(characters, root, reference, reference, props, rulesets, length, points, children)
 							else
 								switch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {
-									// d m s
-									case 100: case 109: case 115:
+									// d l m s
+									case 100: case 108: case 109: case 115:
 										parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children)
 										break
 									default:

diff --git a/src/Serializer.js b/src/Serializer.js
@@ -1,4 +1,4 @@
-import {IMPORT, COMMENT, RULESET, DECLARATION, KEYFRAMES} from './Enum.js'
+import {IMPORT, LAYER, COMMENT, RULESET, DECLARATION, KEYFRAMES} from './Enum.js'
 import {strlen, sizeof} from './Utility.js'
 
 /**
@@ -25,6 +25,7 @@ export function serialize (children, callback) {
  */
 export function stringify (element, index, children, callback) {
 	switch (element.type) {
+		case LAYER: if (element.children.length) break
 		case IMPORT: case DECLARATION: return element.return = element.return || element.value
 		case COMMENT: return ''
 		case KEYFRAMES: return element.return = element.value + '{' + serialize(element.children, callback) + '}'

diff --git a/test/Parser.js b/test/Parser.js
@@ -1111,4 +1111,105 @@ describe('Parser', () => {
       `.user.foo.bar.barbar{color:orange;}`
     ].join(''))
   })
+
+  test('cascade @layer (#312)', () => {
+    expect(
+      stylis(`
+        @layer base {
+          border-left:1px solid hotpink;
+        }
+      `)
+    ).to.equal(`@layer base{.user{border-left:1px solid hotpink;}}`);
+
+    expect(
+      stylis(`
+        @layer base {
+          @layer layout {
+            border-left:1px solid hotpink;
+          }
+        }
+      `)
+    ).to.equal(`@layer base{@layer layout{.user{border-left:1px solid hotpink;}}}`);
+
+    expect(
+      stylis(`
+        @layer framework.layout {
+          border-left:1px solid hotpink;
+        }
+      `)
+    ).to.equal(`@layer framework.layout{.user{border-left:1px solid hotpink;}}`);
+
+    expect(
+      stylis(`
+        @import "theme.css" layer(utilties);
+      `)
+    ).to.equal(`@import "theme.css" layer(utilties);`);
+
+    expect(
+      stylis(`
+        @import "foo";
+      `)
+    ).to.equal(`@import "foo";`);
+
+    expect(
+      stylis(`
+        @layer utilities;
+      `)
+    ).to.equal(`@layer utilities;`);
+
+    expect(
+      stylis(`
+        @layer theme, layout, utilities;
+      `)
+    ).to.equal(`@layer theme,layout,utilities;`);
+
+    expect(
+      stylis(`
+        @media (min-width: 30em) {
+          @layer layout {
+            .title { font-size: x-large; }
+          }
+        }
+
+        @layer theme {
+          @media (prefers-color-scheme: dark) {
+            .title { color: white; }
+          }
+        }
+      `)
+    ).to.equal([
+      `@media (min-width: 30em){@layer layout{.user .title{font-size:x-large;}}}`,
+      `@layer theme{@media (prefers-color-scheme: dark){.user .title{color:white;}}}`
+    ].join(''));
+
+    expect(
+      stylis(`
+        @media (min-width: 30em) {
+          @layer layout {
+            .title { font-size: x-large; }
+          }
+        }
+
+        @layer theme {
+          @media (prefers-color-scheme: dark) {
+            .title { color: white; }
+          }
+        }
+      `)
+    ).to.equal([
+      `@media (min-width: 30em){@layer layout{.user .title{font-size:x-large;}}}`,
+      `@layer theme{@media (prefers-color-scheme: dark){.user .title{color:white;}}}`
+    ].join(''));
+
+    expect(
+      stylis(`
+        @layer framework {
+          @keyframes slide-left {
+            from { margin-left: 0; }
+            to { margin-left: -100%; }
+          }
+        }
+      `)
+    ).to.equal(`@layer framework{@keyframes slide-left{from{margin-left:0;}to{margin-left:-100%;}}}`);
+  });
 })