update ast

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,