Implement style container queries

Closes #461
parcel-bundler · Apr 15, 2023 · 7413eac · 7413eac
1 parent 81cd955
commit 7413eac
Show file tree

Hide file tree

Showing 5 changed files with 527 additions and 90 deletions.
diff --git a/node/ast.d.ts b/node/ast.d.ts
@@ -6835,6 +6835,56 @@ export type SyntaxComponentKind =
       type: "literal";
       value: string;
     };
+/**
+ * Represents a container condition.
+ */
+export type ContainerCondition =
+  | {
+      type: "feature";
+      value: MediaFeature;
+    }
+  | {
+      type: "not";
+      value: ContainerCondition;
+    }
+  | {
+      /**
+       * The conditions for the operator.
+       */
+      conditions: ContainerCondition[];
+      /**
+       * The operator for the conditions.
+       */
+      operator: Operator;
+      type: "operation";
+    }
+  | {
+      type: "style";
+      value: StyleQuery;
+    };
+/**
+ * Represents a style query within a container condition.
+ */
+export type StyleQuery =
+  | {
+      type: "feature";
+      value: Declaration;
+    }
+  | {
+      type: "not";
+      value: StyleQuery;
+    }
+  | {
+      /**
+       * The conditions for the operator.
+       */
+      conditions: StyleQuery[];
+      /**
+       * The operator for the conditions.
+       */
+      operator: Operator;
+      type: "operation";
+    };
 export type DefaultAtRule = null;
 
 /**
@@ -8826,7 +8876,7 @@ export interface ContainerRule<D = Declaration> {
   /**
    * The container condition.
    */
-  condition: MediaCondition;
+  condition: ContainerCondition;
   /**
    * The location of the rule in the source file.
    */

diff --git a/src/lib.rs b/src/lib.rs
@@ -23689,6 +23689,107 @@ mod tests {
       },
     );
 
+    minify_test(
+      r#"
+      @container style(--responsive: true) {
+        .foo {
+          color: red;
+        }
+      }
+    "#,
+      "@container style(--responsive:true){.foo{color:red}}",
+    );
+    minify_test(
+      r#"
+      @container style(--responsive: true) and style(color: yellow) {
+        .foo {
+          color: red;
+        }
+      }
+    "#,
+      "@container style(--responsive:true) and style(color:#ff0){.foo{color:red}}",
+    );
+    minify_test(
+      r#"
+      @container not style(--responsive: true) {
+        .foo {
+          color: red;
+        }
+      }
+    "#,
+      "@container not style(--responsive:true){.foo{color:red}}",
+    );
+    minify_test(
+      r#"
+      @container (inline-size > 45em) and style(--responsive: true) {
+        .foo {
+          color: red;
+        }
+      }
+    "#,
+      "@container (inline-size>45em) and style(--responsive:true){.foo{color:red}}",
+    );
+    minify_test(
+      r#"
+      @container style((accent-color: yellow) or (--bar: 10px)) {
+        .foo {
+          color: red;
+        }
+      }
+    "#,
+      "@container style((accent-color:#ff0) or (--bar:10px)){.foo{color:red}}",
+    );
+    minify_test(
+      r#"
+      @container style(not ((width: calc(10px + 20px)) and ((--bar: url(x))))) {
+        .foo {
+          color: red;
+        }
+      }
+    "#,
+      "@container style(not ((width:30px) and (--bar:url(x)))){.foo{color:red}}",
+    );
+    minify_test(
+      r#"
+      @container style(color: yellow !important) {
+        .foo {
+          color: red;
+        }
+      }
+    "#,
+      "@container style(color:yellow){.foo{color:red}}",
+    );
+    minify_test(
+      r#"
+      @container style(--foo:) {
+        .foo {
+          color: red;
+        }
+      }
+    "#,
+      "@container style(--foo:){.foo{color:red}}",
+    );
+    minify_test(
+      r#"
+      @container style(--foo: ) {
+        .foo {
+          color: red;
+        }
+      }
+    "#,
+      "@container style(--foo:){.foo{color:red}}",
+    );
+    minify_test(
+      r#"
+      @container style(--my-prop: foo - bar ()) {
+        .foo {
+          color: red;
+        }
+      }
+    "#,
+      "@container style(--my-prop:foo - bar ()){.foo{color:red}}",
+    );
+
     // Disallow 'none', 'not', 'and', 'or' as a `<container-name>`
     // https://github.com/w3c/csswg-drafts/issues/7203#issuecomment-1144257312
     // https://chromium-review.googlesource.com/c/chromium/src/+/3698402
@@ -23724,6 +23825,12 @@ mod tests {
       "@container foo bar (width < 100vw) {}",
       ParserError::UnexpectedToken(crate::properties::custom::Token::Ident("bar".into())),
     );
+
+    error_test("@container style(width) {}", ParserError::EndOfInput);
+    error_test(
+      "@container style(style(--foo: bar)) {}",
+      ParserError::UnexpectedToken(crate::properties::custom::Token::Function("style".into())),
+    );
   }
 
   #[test]