update ast

Author: devongovett

node/ast.d.ts

@@ -4230,23 +4230,30 @@ export type PositionComponentFor_VerticalPositionKeyword =
  * See [RadialGradient](RadialGradient).
  */
 export type EndingShape =
-  | {
-      type: "circle";
-      value: Circle;
-    }
   | {
       type: "ellipse";
       value: Ellipse;
+    }
+  | {
+      type: "circle";
+      value: Circle;
     };
 /**
- * A circle ending shape for a `radial-gradient()`.
+ * An ellipse ending shape for a `radial-gradient()`.
  *
  * See [RadialGradient](RadialGradient).
  */
-export type Circle =
+export type Ellipse =
   | {
-      type: "radius";
-      value: Length;
+      type: "size";
+      /**
+       * The x-radius of the ellipse.
+       */
+      x: DimensionPercentageFor_LengthValue;
+      /**
+       * The y-radius of the ellipse.
+       */
+      y: DimensionPercentageFor_LengthValue;
     }
   | {
       type: "extent";
@@ -4259,21 +4266,14 @@ export type Circle =
  */
 export type ShapeExtent = "closest-side" | "farthest-side" | "closest-corner" | "farthest-corner";
 /**
- * An ellipse ending shape for a `radial-gradient()`.
+ * A circle ending shape for a `radial-gradient()`.
  *
  * See [RadialGradient](RadialGradient).
  */
-export type Ellipse =
+export type Circle =
   | {
-      type: "size";
-      /**
-       * The x-radius of the ellipse.
-       */
-      x: DimensionPercentageFor_LengthValue;
-      /**
-       * The y-radius of the ellipse.
-       */
-      y: DimensionPercentageFor_LengthValue;
+      type: "radius";
+      value: Length;
     }
   | {
       type: "extent";
@@ -4438,11 +4438,11 @@ export type WebKitGradientPointComponentFor_HorizontalPositionKeyword =
  */
 export type NumberOrPercentage =
   | {
-      type: "percentage";
+      type: "number";
       value: number;
     }
   | {
-      type: "number";
+      type: "percentage";
       value: number;
     };
 /**
@@ -4753,13 +4753,13 @@ export type RectFor_LengthOrNumber = [LengthOrNumber, LengthOrNumber, LengthOrNu
  * Either a [`<length>`](https://www.w3.org/TR/css-values-4/#lengths) or a [`<number>`](https://www.w3.org/TR/css-values-4/#numbers).
  */
 export type LengthOrNumber =
-  | {
-      type: "length";
-      value: Length;
-    }
   | {
       type: "number";
       value: number;
+    }
+  | {
+      type: "length";
+      value: Length;
     };
 /**
  * A single [border-image-repeat](https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat) keyword.
@@ -5570,22 +5570,16 @@ export type AnimationRangeStart = AnimationAttachmentRange;
  * A value for the [animation-range-start](https://drafts.csswg.org/scroll-animations/#animation-range-start) or [animation-range-end](https://drafts.csswg.org/scroll-animations/#animation-range-end) property.
  */
 export type AnimationAttachmentRange =
-  | "Normal"
-  | {
-      LengthPercentage: DimensionPercentageFor_LengthValue;
-    }
-  | {
-      TimelineRange: {
-        /**
-         * The name of the timeline range.
-         */
-        name: TimelineRangeName;
-        /**
-         * The offset from the start of the named timeline range.
-         */
-        offset: DimensionPercentageFor_LengthValue;
-      };
-    };
+  "normal" | DimensionPercentageFor_LengthValue | {
+    /**
+     * The name of the timeline range.
+     */
+    name: TimelineRangeName;
+    /**
+     * The offset from the start of the named timeline range.
+     */
+    offset: DimensionPercentageFor_LengthValue;
+  };
 /**
  * A [view progress timeline range](https://drafts.csswg.org/scroll-animations/#view-timelines-ranges)
  */
@@ -5709,7 +5703,7 @@ export type Transform =
 /**
  * A value for the [transform-style](https://drafts.csswg.org/css-transforms-2/#transform-style-property) property.
  */
-export type TransformStyle = "flat" | "preserve-3d";
+export type TransformStyle = "flat" | "preserve3d";
 /**
  * A value for the [transform-box](https://drafts.csswg.org/css-transforms-1/#transform-box) property.
  */
@@ -6105,9 +6099,6 @@ export type MarkerSide = "match-self" | "match-parent";
  * An SVG [`<paint>`](https://www.w3.org/TR/SVG2/painting.html#SpecifyingPaint) value used in the `fill` and `stroke` properties.
  */
 export type SVGPaint =
-  | {
-      type: "none";
-    }
   | {
       /**
        * A fallback to be used used in case the paint server cannot be resolved.
@@ -6128,6 +6119,9 @@ export type SVGPaint =
     }
   | {
       type: "context-stroke";
+    }
+  | {
+      type: "none";
     };
 /**
  * A fallback for an SVG paint in case a paint server `url()` cannot be resolved.
@@ -6938,6 +6932,10 @@ export type KeyframeSelector =
     }
   | {
       type: "to";
+    }
+  | {
+      type: "timeline-range-percentage";
+      value: TimelineRangePercentage;
     };
 /**
  * KeyframesName
@@ -9164,6 +9162,19 @@ export interface Keyframe<D = Declaration> {
    */
   selectors: KeyframeSelector[];
 }
+/**
+ * A percentage of a given timeline range
+ */
+export interface TimelineRangePercentage {
+  /**
+   * The name of the timeline range.
+   */
+  name: TimelineRangeName;
+  /**
+   * The percentage progress between the start and end of the range.
+   */
+  percentage: number;
+}
 /**
  * A [@font-face](https://drafts.csswg.org/css-fonts/#font-face-rule) rule.
  */

scripts/build-ast.js

@@ -66,6 +66,15 @@ compileFromFile('node/ast.json', {
         path.node.typeAnnotation.types[1].members[0].key.name === 'xyz'
       ) {
         path.get('typeAnnotation.types.1').replaceWith(path.node.typeAnnotation.types[1].members[0].typeAnnotation.typeAnnotation);
+      } else if (path.node.id.name === 'AnimationAttachmentRange' && path.node.typeAnnotation.type === 'TSUnionType') {
+        let types = path.node.typeAnnotation.types;
+        if (types[1].type === 'TSTypeLiteral' && types[1].members[0].key.name === 'lengthpercentage') {
+          path.get('typeAnnotation.types.1').replaceWith(path.node.typeAnnotation.types[1].members[0].typeAnnotation.typeAnnotation);
+        }
+
+        if (types[2].type === 'TSTypeLiteral' && types[2].members[0].key.name === 'timelinerange') {
+          path.get('typeAnnotation.types.2').replaceWith(path.node.typeAnnotation.types[2].members[0].typeAnnotation.typeAnnotation);
+        }
       }
     }
   });

src/macros.rs

@@ -10,7 +10,7 @@ macro_rules! enum_property {
   ) => {
     #[derive(Debug, Clone, Copy, PartialEq, Parse, ToCss)]
     #[cfg_attr(feature = "visitor", derive(Visit))]
-    #[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize), serde(rename_all = "lowercase"))]
+    #[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize), serde(rename_all = "kebab-case"))]
     #[cfg_attr(feature = "jsonschema", derive(schemars::JsonSchema))]
     #[cfg_attr(feature = "into_owned", derive(static_self::IntoOwned))]
     $(#[$outer])*

src/properties/animation.rs

@@ -379,7 +379,11 @@ impl ToCss for ViewTimeline {
 /// A [view progress timeline range](https://drafts.csswg.org/scroll-animations/#view-timelines-ranges)
 #[derive(Debug, Clone, PartialEq, Parse, ToCss)]
 #[cfg_attr(feature = "visitor", derive(Visit))]
-#[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
+#[cfg_attr(
+  feature = "serde",
+  derive(serde::Serialize, serde::Deserialize),
+  serde(rename_all = "kebab-case")
+)]
 #[cfg_attr(feature = "jsonschema", derive(schemars::JsonSchema))]
 #[cfg_attr(feature = "into_owned", derive(static_self::IntoOwned))]
 pub enum TimelineRangeName {
@@ -402,15 +406,17 @@ pub enum TimelineRangeName {
 /// or [animation-range-end](https://drafts.csswg.org/scroll-animations/#animation-range-end) property.
 #[derive(Debug, Clone, PartialEq)]
 #[cfg_attr(feature = "visitor", derive(Visit))]
-#[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
+#[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize), serde(rename_all = "lowercase"))]
 #[cfg_attr(feature = "jsonschema", derive(schemars::JsonSchema))]
 #[cfg_attr(feature = "into_owned", derive(static_self::IntoOwned))]
 pub enum AnimationAttachmentRange {
   /// The start of the animation’s attachment range is the start of its associated timeline.
   Normal,
   /// The animation attachment range starts at the specified point on the timeline measuring from the start of the timeline.
+  #[cfg_attr(feature = "serde", serde(untagged))]
   LengthPercentage(LengthPercentage),
   /// The animation attachment range starts at the specified point on the timeline measuring from the start of the specified named timeline range.
+  #[cfg_attr(feature = "serde", serde(untagged))]
   TimelineRange {
     /// The name of the timeline range.
     name: TimelineRangeName,