Parse the @starting-style rule

Author: devongovett

node/ast.d.ts

@@ -5,6 +5,7 @@
  * and run json-schema-to-typescript to regenerate this file.
  */
 
+export type String = string;
 /**
  * A CSS rule.
  */
@@ -80,6 +81,10 @@ export type Rule<D = Declaration, M = MediaQuery> = | {
     type: "container";
     value: ContainerRule<D, M>;
   }
+| {
+    type: "starting-style";
+    value: StartingStyleRule<D, M>;
+  }
 | {
     type: "ignored";
   }
@@ -221,7 +226,6 @@ export type MediaFeatureId =
   | "device-aspect-ratio"
   | "-webkit-device-pixel-ratio"
   | "-moz-device-pixel-ratio";
-export type String = string;
 /**
  * [media feature value](https://drafts.csswg.org/mediaqueries/#typedef-mf-value) within a media query.
  *
@@ -1220,6 +1224,9 @@ export type PropertyId =
       property: "box-sizing";
       vendorPrefix: VendorPrefix;
     }
+  | {
+      property: "aspect-ratio";
+    }
   | {
       property: "overflow";
     }
@@ -1989,6 +1996,10 @@ export type PropertyId =
   | {
       property: "text-shadow";
     }
+  | {
+      property: "text-size-adjust";
+      vendorPrefix: VendorPrefix;
+    }
   | {
       property: "box-decoration-break";
       vendorPrefix: VendorPrefix;
@@ -2353,6 +2364,10 @@ export type Declaration =
       value: BoxSizing;
       vendorPrefix: VendorPrefix;
     }
+  | {
+      property: "aspect-ratio";
+      value: AspectRatio;
+    }
   | {
       property: "overflow";
       value: Overflow;
@@ -3356,6 +3371,11 @@ export type Declaration =
       property: "text-shadow";
       value: TextShadow[];
     }
+  | {
+      property: "text-size-adjust";
+      value: TextSizeAdjust;
+      vendorPrefix: VendorPrefix;
+    }
   | {
       property: "box-decoration-break";
       value: BoxDecorationBreak;
@@ -5111,7 +5131,15 @@ export type FontSize =
  *
  * See [FontSize](FontSize).
  */
-export type AbsoluteFontSize = "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large";
+export type AbsoluteFontSize =
+  | "xx-small"
+  | "x-small"
+  | "small"
+  | "medium"
+  | "large"
+  | "x-large"
+  | "xx-large"
+  | "xxx-large";
 /**
  * A [relative font size](https://www.w3.org/TR/css-fonts-3/#relative-size-value), as used in the `font-size` property.
  *
@@ -5594,6 +5622,22 @@ export type TextEmphasisPositionHorizontal = "left" | "right";
  * See [TextEmphasisPosition](TextEmphasisPosition).
  */
 export type TextEmphasisPositionVertical = "over" | "under";
+/**
+ * A value for the [text-size-adjust](https://w3c.github.io/csswg-drafts/css-size-adjust/#adjustment-control) property.
+ */
+export type TextSizeAdjust =
+  | {
+      type: "auto";
+    }
+  | {
+      type: "none";
+    }
+  | (
+      | {
+          type: "percentage";
+        }
+      | number
+    );
 /**
  * A value for the [box-decoration-break](https://www.w3.org/TR/css-break-3/#break-decoration) property.
  */
@@ -6143,7 +6187,9 @@ export type Combinator =
   | ("child" | "descendant" | "next-sibling" | "later-sibling")
   | "pseudo-element"
   | "slot-assignment"
-  | "part";
+  | "part"
+  | "deep-descendant"
+  | "deep";
 export type NamespaceConstraint =
   | {
       type: "any";
@@ -6311,6 +6357,21 @@ export type PseudoClass =
       kind: "fullscreen";
       vendorPrefix: VendorPrefix;
     }
+  | {
+      kind: "open";
+    }
+  | {
+      kind: "closed";
+    }
+  | {
+      kind: "modal";
+    }
+  | {
+      kind: "picture-in-picture";
+    }
+  | {
+      kind: "popover-open";
+    }
   | {
       kind: "defined";
     }
@@ -7064,6 +7125,10 @@ export type DefaultAtRule = null;
  * // Serialize it to a string. let res = stylesheet.to_css(PrinterOptions::default()).unwrap(); assert_eq!(res.code, ".foo, .bar {\n  color: red;\n}\n"); ```
  */
 export interface StyleSheet<D = Declaration, M = MediaQuery> {
+  /**
+   * The license comments that appeared at the start of the file.
+   */
+  licenseComments: String[];
   /**
    * A list of top-level rules within the style sheet.
    */
@@ -7440,6 +7505,19 @@ export interface BoxShadow {
    */
   yOffset: Length;
 }
+/**
+ * A value for the [aspect-ratio](https://drafts.csswg.org/css-sizing-4/#aspect-ratio) property.
+ */
+export interface AspectRatio {
+  /**
+   * The `auto` keyword.
+   */
+  auto: boolean;
+  /**
+   * A preferred aspect ratio for the box, specified as width / height.
+   */
+  ratio?: Ratio | null;
+}
 /**
  * A value for the [overflow](https://www.w3.org/TR/css-overflow-3/#overflow-properties) shorthand property.
  */
@@ -9049,6 +9127,19 @@ export interface ContainerRule<D = Declaration, M = MediaQuery> {
    */
   rules: Rule<D, M>[];
 }
+/**
+ * A [@starting-style](https://drafts.csswg.org/css-transitions-2/#defining-before-change-style-the-starting-style-rule) rule.
+ */
+export interface StartingStyleRule<D = Declaration, M = MediaQuery> {
+  /**
+   * The location of the rule in the source file.
+   */
+  loc: Location;
+  /**
+   * Nested rules within the `@starting-style` rule.
+   */
+  rules: Rule<D, M>[];
+}
 /**
  * An unknown at-rule, stored as raw tokens.
  */

node/src/transformer.rs

@@ -286,6 +286,7 @@ impl<'i> Visitor<'i, AtRule<'i>> for JsVisitor {
             CssRule::MozDocument(..) => "moz-document",
             CssRule::Nesting(..) => "nesting",
             CssRule::Viewport(..) => "viewport",
+            CssRule::StartingStyle(..) => "starting-style",
             CssRule::Unknown(v) => {
               let name = v.name.as_ref();
               if let Some(visit) = rule_map.custom(stage, "unknown", name) {

src/lib.rs

@@ -26108,4 +26108,41 @@ mod tests {
       .foo{color:red}"#},
     );
   }
+
+  #[test]
+  fn test_starting_style() {
+    minify_test(
+      r#"
+      @starting-style {
+        h1 {
+          background: yellow;
+        }
+      }
+      "#,
+      "@starting-style{h1{background:#ff0}}",
+    );
+    minify_test("@starting-style {}", "");
+
+    nesting_test(
+      r#"
+      h1 {
+        background: red;
+        @starting-style {
+          background: yellow;
+        }
+      }
+      "#,
+      indoc! {r#"
+      h1 {
+        background: red;
+      }
+
+      @starting-style {
+        h1 {
+          background: #ff0;
+        }
+      }
+      "#},
+    );
+  }
 }

src/parser.rs

@@ -7,6 +7,7 @@ use crate::rules::container::{ContainerCondition, ContainerName, ContainerRule};
 use crate::rules::font_palette_values::FontPaletteValuesRule;
 use crate::rules::layer::{LayerBlockRule, LayerStatementRule};
 use crate::rules::property::PropertyRule;
+use crate::rules::starting_style::StartingStyleRule;
 use crate::rules::viewport::ViewportRule;
 use crate::rules::{
   counter_style::CounterStyleRule,
@@ -190,6 +191,8 @@ pub enum AtRulePrelude<'i, T> {
   Property(DashedIdent<'i>),
   /// A @container prelude.
   Container(Option<ContainerName<'i>>, ContainerCondition<'i>),
+  /// A @starting-style prelude.
+  StartingStyle,
   /// An unknown prelude.
   Unknown(CowArcStr<'i>, TokenList<'i>),
   /// A custom prelude.
@@ -512,6 +515,9 @@ impl<'a, 'o, 'b, 'i, T: crate::traits::AtRuleParser<'i>> AtRuleParser<'i> for Ne
         let condition = ContainerCondition::parse(input)?;
         Ok(AtRulePrelude::Container(name, condition))
       },
+      "starting-style" => {
+        Ok(AtRulePrelude::StartingStyle)
+      },
       _ => parse_custom_at_rule_prelude(&name, input, self.options, self.at_rule_parser)
     }
   }
@@ -625,6 +631,10 @@ impl<'a, 'o, 'b, 'i, T: crate::traits::AtRuleParser<'i>> AtRuleParser<'i> for Ne
         // These rules don't have blocks.
         Err(input.new_unexpected_token_error(Token::CurlyBracketBlock))
       }
+      AtRulePrelude::StartingStyle => Ok(CssRule::StartingStyle(StartingStyleRule {
+        rules: self.parse_nested_rules(input)?,
+        loc,
+      })),
       AtRulePrelude::FontFeatureValues | AtRulePrelude::Nest(..) => unreachable!(),
       AtRulePrelude::Unknown(name, prelude) => Ok(CssRule::Unknown(UnknownAtRule {
         name,
@@ -883,6 +893,9 @@ impl<'a, 'o, 'i, T: crate::traits::AtRuleParser<'i>> AtRuleParser<'i> for StyleR
         let name = input.try_parse(LayerName::parse).ok();
         Ok(AtRulePrelude::LayerBlock(name))
       },
+      "starting-style" => {
+        Ok(AtRulePrelude::StartingStyle)
+      },
       "nest" => {
         self.options.warn(input.new_custom_error(ParserError::DeprecatedNestRule));
         let selector_parser = SelectorParser {
@@ -942,6 +955,13 @@ impl<'a, 'o, 'i, T: crate::traits::AtRuleParser<'i>> AtRuleParser<'i> for StyleR
         }));
         Ok(())
       }
+      AtRulePrelude::StartingStyle => {
+        self.rules.0.push(CssRule::StartingStyle(StartingStyleRule {
+          rules: parse_nested_at_rule(input, self.options, self.at_rule_parser)?,
+          loc,
+        }));
+        Ok(())
+      }
       AtRulePrelude::Nest(selectors) => {
         let (declarations, rules) = parse_declarations_and_nested_rules(input, self.options, self.at_rule_parser)?;
         self.rules.0.push(CssRule::Nesting(NestingRule {

src/rules/mod.rs

@@ -50,6 +50,7 @@ pub mod namespace;
 pub mod nesting;
 pub mod page;
 pub mod property;
+pub mod starting_style;
 pub mod style;
 pub mod supports;
 pub mod unknown;
@@ -90,6 +91,7 @@ use namespace::NamespaceRule;
 use nesting::NestingRule;
 use page::PageRule;
 use smallvec::{smallvec, SmallVec};
+use starting_style::StartingStyleRule;
 use std::collections::{HashMap, HashSet};
 use std::hash::{BuildHasherDefault, Hasher};
 use style::StyleRule;
@@ -166,6 +168,8 @@ pub enum CssRule<'i, R = DefaultAtRule> {
   Property(PropertyRule<'i>),
   /// A `@container` rule.
   Container(ContainerRule<'i, R>),
+  /// A `@starting-style` rule.
+  StartingStyle(StartingStyleRule<'i, R>),
   /// A placeholder for a rule that was removed.
   Ignored,
   /// An unknown at-rule.
@@ -302,6 +306,10 @@ impl<'i, 'de: 'i, R: serde::Deserialize<'de>> serde::Deserialize<'de> for CssRul
         let rule = ContainerRule::deserialize(deserializer)?;
         Ok(CssRule::Container(rule))
       }
+      "starting-style" => {
+        let rule = StartingStyleRule::deserialize(deserializer)?;
+        Ok(CssRule::StartingStyle(rule))
+      }
       "ignored" => Ok(CssRule::Ignored),
       "unknown" => {
         let rule = UnknownAtRule::deserialize(deserializer)?;
@@ -339,6 +347,7 @@ impl<'a, 'i, T: ToCss> ToCss for CssRule<'i, T> {
       CssRule::LayerStatement(layer) => layer.to_css(dest),
       CssRule::LayerBlock(layer) => layer.to_css(dest),
       CssRule::Property(property) => property.to_css(dest),
+      CssRule::StartingStyle(rule) => rule.to_css(dest),
       CssRule::Container(container) => container.to_css(dest),
       CssRule::Unknown(unknown) => unknown.to_css(dest),
       CssRule::Custom(rule) => rule.to_css(dest).map_err(|_| PrinterError {
@@ -754,6 +763,11 @@ impl<'i, T: Clone> CssRuleList<'i, T> {
             continue;
           }
         }
+        CssRule::StartingStyle(rule) => {
+          if rule.minify(context, parent_is_unused)? {
+            continue;
+          }
+        }
         CssRule::FontPaletteValues(f) => {
           if context.unused_symbols.contains(f.name.0.as_ref()) {
             continue;