Implement scroll-state container queries

Closes parcel-bundler#887, closes parcel-bundler#1031

Author: devongovett

node/ast.d.ts

@@ -134,6 +134,10 @@ export type MediaCondition =
        */
       operator: Operator;
       type: "operation";
+    }
+  | {
+      type: "unknown";
+      value: TokenOrValue[];
     };
 /**
  * A generic media feature or container feature.
@@ -6420,7 +6424,7 @@ export type ZIndex =
 /**
  * A value for the [container-type](https://drafts.csswg.org/css-contain-3/#container-type) property. Establishes the element as a query container for the purpose of container queries.
  */
-export type ContainerType = "normal" | "inline-size" | "size";
+export type ContainerType = "normal" | "inline-size" | "size" | "scroll-state";
 /**
  * A value for the [container-name](https://drafts.csswg.org/css-contain-3/#container-name) property.
  */
@@ -6944,6 +6948,25 @@ export type PseudoElement =
        */
       part: ViewTransitionPartSelector;
     }
+  | {
+      /**
+       * A form control identifier.
+       */
+      identifier: String;
+      kind: "picker-function";
+    }
+  | {
+      kind: "picker-icon";
+    }
+  | {
+      kind: "checkmark";
+    }
+  | {
+      kind: "grammar-error";
+    }
+  | {
+      kind: "spelling-error";
+    }
   | {
       kind: "custom";
       /**
@@ -7390,6 +7413,14 @@ export type ContainerCondition<D = Declaration> = | {
 | {
     type: "style";
     value: StyleQuery<D>;
+  }
+| {
+    type: "scroll-state";
+    value: ScrollStateQuery;
+  }
+| {
+    type: "unknown";
+    value: TokenOrValue[];
   };
 /**
  * A generic media feature or container feature.
@@ -7485,6 +7516,97 @@ export type StyleQuery<D = Declaration> = | {
     operator: Operator;
     type: "operation";
   };
+/**
+ * Represents a scroll state query within a container condition.
+ */
+export type ScrollStateQuery =
+  | {
+      type: "feature";
+      value: QueryFeatureFor_ScrollStateFeatureId;
+    }
+  | {
+      type: "not";
+      value: ScrollStateQuery;
+    }
+  | {
+      /**
+       * The conditions for the operator.
+       */
+      conditions: ScrollStateQuery[];
+      /**
+       * The operator for the conditions.
+       */
+      operator: Operator;
+      type: "operation";
+    };
+/**
+ * A generic media feature or container feature.
+ */
+export type QueryFeatureFor_ScrollStateFeatureId =
+  | {
+      /**
+       * The name of the feature.
+       */
+      name: MediaFeatureNameFor_ScrollStateFeatureId;
+      type: "plain";
+      /**
+       * The feature value.
+       */
+      value: MediaFeatureValue;
+    }
+  | {
+      /**
+       * The name of the feature.
+       */
+      name: MediaFeatureNameFor_ScrollStateFeatureId;
+      type: "boolean";
+    }
+  | {
+      /**
+       * The name of the feature.
+       */
+      name: MediaFeatureNameFor_ScrollStateFeatureId;
+      /**
+       * A comparator.
+       */
+      operator: MediaFeatureComparison;
+      type: "range";
+      /**
+       * The feature value.
+       */
+      value: MediaFeatureValue;
+    }
+  | {
+      /**
+       * The end value.
+       */
+      end: MediaFeatureValue;
+      /**
+       * A comparator for the end value.
+       */
+      endOperator: MediaFeatureComparison;
+      /**
+       * The name of the feature.
+       */
+      name: MediaFeatureNameFor_ScrollStateFeatureId;
+      /**
+       * A start value.
+       */
+      start: MediaFeatureValue;
+      /**
+       * A comparator for the start value.
+       */
+      startOperator: MediaFeatureComparison;
+      type: "interval";
+    };
+/**
+ * A media feature name.
+ */
+export type MediaFeatureNameFor_ScrollStateFeatureId = ScrollStateFeatureId | String | String;
+/**
+ * A container query scroll state feature identifier.
+ */
+export type ScrollStateFeatureId = "stuck" | "snapped" | "scrollable" | "scrolled";
 /**
  * A property within a `@view-transition` rule.
  *

src/lib.rs

@@ -9108,6 +9108,12 @@ mod tests {
       "@media (prefers-color-scheme = dark) { .foo { color: chartreuse }}",
       ParserError::InvalidMediaQuery,
     );
+    error_test(
+      "@media unknown(foo) {}",
+      ParserError::UnexpectedToken(crate::properties::custom::Token::Function("unknown".into())),
+    );
+
+    error_recovery_test("@media unknown(foo) {}");
   }
 
   #[test]
@@ -29335,6 +29341,56 @@ mod tests {
     "#,
       "@container style(width){.foo{color:red}}",
     );
+    minify_test(
+      r#"
+      @container scroll-state(scrollable: top) {
+        .foo {
+          color: red;
+        }
+      }
+    "#,
+      "@container scroll-state(scrollable:top){.foo{color:red}}",
+    );
+    minify_test(
+      r#"
+      @container scroll-state((stuck: top) and (stuck: left)) {
+        .foo {
+          color: red;
+        }
+      }
+    "#,
+      "@container scroll-state((stuck:top) and (stuck:left)){.foo{color:red}}",
+    );
+    minify_test(
+      r#"
+      @container scroll-state(not ((scrollable: bottom) and (scrollable: right))) {
+        .foo {
+          color: red;
+        }
+      }
+    "#,
+      "@container scroll-state(not ((scrollable:bottom) and (scrollable:right))){.foo{color:red}}",
+    );
+    minify_test(
+      r#"
+      @container (scroll-state(scrollable: inline-end)) {
+        .foo {
+          color: red;
+        }
+      }
+    "#,
+      "@container scroll-state(scrollable:inline-end){.foo{color:red}}",
+    );
+    minify_test(
+      r#"
+      @container not scroll-state(scrollable: top) {
+        .foo {
+          color: red;
+        }
+      }
+    "#,
+      "@container not scroll-state(scrollable:top){.foo{color:red}}",
+    );
 
     // Disallow 'none', 'not', 'and', 'or' as a `<container-name>`
     // https://github.com/w3c/csswg-drafts/issues/7203#issuecomment-1144257312
@@ -29379,6 +29435,16 @@ mod tests {
       "@container style(style(--foo: bar)) {}",
       ParserError::UnexpectedToken(crate::properties::custom::Token::Function("style".into())),
     );
+    error_test(
+      "@container scroll-state(scroll-state(scrollable: top)) {}",
+      ParserError::InvalidMediaQuery,
+    );
+    error_test(
+      "@container unknown(foo) {}",
+      ParserError::UnexpectedToken(crate::properties::custom::Token::Function("unknown".into())),
+    );
+
+    error_recovery_test("@container unknown(foo) {}");
   }
 
   #[test]