Implement view transitions level 2

napi/src/transformer.rs

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

node/ast.d.ts

@@ -1,4 +1,4 @@
-/* tslint:disable */
+/* eslint-disable */
 /**
  * This file was automatically generated by json-schema-to-typescript.
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
@@ -89,6 +89,10 @@ export type Rule<D = Declaration, M = MediaQuery> = | {
     type: "starting-style";
     value: StartingStyleRule<D, M>;
   }
+| {
+    type: "view-transition";
+    value: ViewTransitionRule;
+  }
 | {
     type: "ignored";
   }
@@ -2342,6 +2346,12 @@ export type PropertyId =
   | {
       property: "view-transition-name";
     }
+  | {
+      property: "view-transition-class";
+    }
+  | {
+      property: "view-transition-group";
+    }
   | {
       property: "color-scheme";
     }
@@ -3819,7 +3829,15 @@ export type Declaration =
     }
   | {
       property: "view-transition-name";
-      value: String;
+      value: ViewTransitionName;
+    }
+  | {
+      property: "view-transition-class";
+      value: NoneOrCustomIdentList;
+    }
+  | {
+      property: "view-transition-group";
+      value: ViewTransitionGroup;
     }
   | {
       property: "color-scheme";
@@ -6406,6 +6424,21 @@ export type ContainerNameList =
       type: "names";
       value: String[];
     };
+/**
+ * A value for the [view-transition-name](https://drafts.csswg.org/css-view-transitions-1/#view-transition-name-prop) property.
+ */
+export type ViewTransitionName =
+  "none" | "auto" | String;
+/**
+ * The `none` keyword, or a space-separated list of custom idents.
+ */
+export type NoneOrCustomIdentList =
+  "none" | String[];
+/**
+ * A value for the [view-transition-group](https://drafts.csswg.org/css-view-transitions-2/#view-transition-group-prop) property.
+ */
+export type ViewTransitionGroup =
+  "normal" | "contain" | "nearest" | String;
 /**
  * A [CSS-wide keyword](https://drafts.csswg.org/css-cascade-5/#defaulting-keywords).
  */
@@ -6733,6 +6766,16 @@ export type PseudoClass =
       kind: "autofill";
       vendorPrefix: VendorPrefix;
     }
+  | {
+      kind: "active-view-transition";
+    }
+  | {
+      kind: "active-view-transition-type";
+      /**
+       * A view transition type.
+       */
+      type: String[];
+    }
   | {
       kind: "local";
       /**
@@ -6864,28 +6907,28 @@ export type PseudoElement =
       /**
        * A part name selector.
        */
-      partName: ViewTransitionPartName;
+      part: ViewTransitionPartSelector;
     }
   | {
       kind: "view-transition-image-pair";
       /**
        * A part name selector.
        */
-      partName: ViewTransitionPartName;
+      part: ViewTransitionPartSelector;
     }
   | {
       kind: "view-transition-old";
       /**
        * A part name selector.
        */
-      partName: ViewTransitionPartName;
+      part: ViewTransitionPartSelector;
     }
   | {
       kind: "view-transition-new";
       /**
        * A part name selector.
        */
-      partName: ViewTransitionPartName;
+      part: ViewTransitionPartSelector;
     }
   | {
       kind: "custom";
@@ -7413,6 +7456,28 @@ export type StyleQuery<D = Declaration> = | {
     operator: Operator;
     type: "operation";
   };
+/**
+ * A property within a `@view-transition` rule.
+ *
+ * See [ViewTransitionRule](ViewTransitionRule).
+ */
+export type ViewTransitionProperty =
+  | {
+      property: "navigation";
+      value: Navigation;
+    }
+  | {
+      property: "types";
+      value: NoneOrCustomIdentList;
+    }
+  | {
+      property: "custom";
+      value: CustomProperty;
+    };
+/**
+ * A value for the [navigation](https://drafts.csswg.org/css-view-transitions-2/#view-transition-navigation-descriptor) property in a `@view-transition` rule.
+ */
+export type Navigation = "none" | "auto";
 export type DefaultAtRule = null;
 
 /**
@@ -9126,6 +9191,19 @@ export interface AttrOperation {
   operator: AttrSelectorOperator;
   value: string;
 }
+/**
+ * A [view transition part selector](https://w3c.github.io/csswg-drafts/css-view-transitions-1/#typedef-pt-name-selector).
+ */
+export interface ViewTransitionPartSelector {
+  /**
+   * A list of view transition classes.
+   */
+  classes: String[];
+  /**
+   * The view transition part name.
+   */
+  name?: ViewTransitionPartName | null;
+}
 /**
  * A [@keyframes](https://drafts.csswg.org/css-animations/#keyframes) rule.
  */
@@ -9545,6 +9623,19 @@ export interface StartingStyleRule<D = Declaration, M = MediaQuery> {
    */
   rules: Rule<D, M>[];
 }
+/**
+ * A [@view-transition](https://drafts.csswg.org/css-view-transitions-2/#view-transition-rule) rule.
+ */
+export interface ViewTransitionRule {
+  /**
+   * The location of the rule in the source file.
+   */
+  loc: Location2;
+  /**
+   * Declarations in the `@view-transition` rule.
+   */
+  properties: ViewTransitionProperty[];
+}
 /**
  * An unknown at-rule, stored as raw tokens.
  */

scripts/build-ast.js

@@ -75,6 +75,27 @@ compileFromFile('node/ast.json', {
         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);
         }
+      } else if (
+        path.node.id.name === 'NoneOrCustomIdentList' &&
+        path.node.typeAnnotation.type === 'TSUnionType' &&
+        path.node.typeAnnotation.types[1].type === 'TSTypeLiteral' &&
+        path.node.typeAnnotation.types[1].members[0].key.name === 'idents'
+      ) {
+        path.get('typeAnnotation.types.1').replaceWith(path.node.typeAnnotation.types[1].members[0].typeAnnotation.typeAnnotation);
+      } else if (
+        path.node.id.name === 'ViewTransitionGroup' &&
+        path.node.typeAnnotation.type === 'TSUnionType' &&
+        path.node.typeAnnotation.types[3].type === 'TSTypeLiteral' &&
+        path.node.typeAnnotation.types[3].members[0].key.name === 'custom'
+      ) {
+        path.get('typeAnnotation.types.3').replaceWith(path.node.typeAnnotation.types[3].members[0].typeAnnotation.typeAnnotation);
+      } else if (
+        path.node.id.name === 'ViewTransitionName' &&
+        path.node.typeAnnotation.type === 'TSUnionType' &&
+        path.node.typeAnnotation.types[2].type === 'TSTypeLiteral' &&
+        path.node.typeAnnotation.types[2].members[0].key.name === 'custom'
+      ) {
+        path.get('typeAnnotation.types.2').replaceWith(path.node.typeAnnotation.types[2].members[0].typeAnnotation.typeAnnotation);
       }
     }
   });

scripts/build-prefixes.js

@@ -331,6 +331,7 @@ let mdnFeatures = {
   lightDark: mdn.css.types.color['light-dark'].__compat.support,
   accentSystemColor: mdn.css.types.color['system-color'].accentcolor_accentcolortext.__compat.support,
   animationTimelineShorthand: mdn.css.properties.animation['animation-timeline_included'].__compat.support,
+  viewTransition: mdn.css.selectors['view-transition'].__compat.support,
 };
 
 for (let key in mdn.css.types.length) {

src/compat.rs

@@ -212,6 +212,7 @@ pub enum Feature {
   VbUnit,
   VhUnit,
   ViUnit,
+  ViewTransition,
   ViewportPercentageUnitsDynamic,
   ViewportPercentageUnitsLarge,
   ViewportPercentageUnitsSmall,
@@ -3464,6 +3465,46 @@ impl Feature {
           return false;
         }
       }
+      Feature::ViewTransition => {
+        if let Some(version) = browsers.chrome {
+          if version < 7143424 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.edge {
+          if version < 7143424 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.opera {
+          if version < 4849664 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.safari {
+          if version < 1179648 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.ios_saf {
+          if version < 1179648 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.samsung {
+          if version < 1376256 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.android {
+          if version < 7143424 {
+            return false;
+          }
+        }
+        if browsers.firefox.is_some() || browsers.ie.is_some() {
+          return false;
+        }
+      }
       Feature::QUnit => {
         if let Some(version) = browsers.chrome {
           if version < 4128768 {