Add support for container queries

This commit adds support for container queries, parsing and hoisting them in the same manner that media queries are.
thysultan · Oct 26, 2022 · 1b97880 · 1b97880
1 parent 3b83b1b
commit 1b97880
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/src/Parser.js b/src/Parser.js
@@ -93,7 +93,7 @@ export function parse (value, root, parent, rule, rules, rulesets, pseudo, point
 							if (offset === 0)
 								parse(characters, root, reference, reference, props, rulesets, length, points, children)
 							else
-								switch (atrule) {
+								switch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {
 									// d m s
 									case 100: 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)

diff --git a/test/Parser.js b/test/Parser.js
@@ -731,6 +731,26 @@ describe('Parser', () => {
     ).to.equal(`.user a a a a a a a a a a a a{color:red;}`)
   })
 
+  test('nesting @container multiple levels', () => {
+    expect(
+      stylis(`
+        div {
+          @container {
+            a {
+              color:red;
+
+        @container {
+                h1 {
+                  color:hotpink;
+                }
+              }
+            }
+          }
+        }
+      `)
+    ).to.equal([`@container{.user div a{color:red;}`, `@container{.user div a h1{color:hotpink;}}}`].join(''))
+  })
+
   test('nesting @media multiple levels', () => {
     expect(
       stylis(`
@@ -875,6 +895,21 @@ describe('Parser', () => {
     ).to.equal(`@media (min-width: 400px){.user div{border-left:1px solid hotpink;}.user span{border-top:none;}}`)
   })
 
+  test('comment in a group of selectors inside a container query', () => {
+    expect(
+      stylis(`
+        @container (min-width: 400px) {
+          div /* comment */ {
+            border-left:1px solid hotpink;
+          }
+          span {
+            border-top:none;
+          }
+        }
+      `)
+    ).to.equal(`@container (min-width: 400px){.user div{border-left:1px solid hotpink;}.user span{border-top:none;}}`)
+  })
+
   test('comment - bang at the start (#114)', () => {
     expect(serialize(compile(`/*! test */body{color:red;}`), stringify)).to.equal('body{color:red;}')
   })
@@ -1032,6 +1067,9 @@ describe('Parser', () => {
         @media {
           color:blue;
         }
+        @container (min-width: 250px) {
+          color:green;
+        }
       }
 
       &.foo {
@@ -1058,6 +1096,7 @@ describe('Parser', () => {
       `.user h1 header,.user div header{font-size:12px;}`+
       `@media{.user h1,.user div{color:red;}}`+
       `@media{.user h1,.user div{color:blue;}}`+
+      `@container (min-width: 250px){.user h1,.user div{color:green;}}`+
       `.user.foo.bar{color:orange;}`+
       `.user.foo.bar.barbar{color:orange;}`
     ].join(''))