useTypesPlugin

Author: martrapp

package-lock.json

@@ -10,21 +10,22 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/starlight": "^0.34.4",
+    "@astrojs/starlight": "^0.35.1",
     "@expressive-code/plugin-collapsible-sections": "^0.41.3",
     "@expressive-code/plugin-line-numbers": "^0.41.3",
-    "@inox-tools/portal-gun": "^1.1.2",
-    "@playwright/test": "^1.54.0",
-    "@types/node": "^24.0.12",
+    "@inox-tools/portal-gun": "^1.2.0",
+    "@playwright/test": "^1.54.1",
+    "@types/node": "^24.0.15",
     "@vtbag/cam-shaft": "^1.0.6",
     "@vtbag/element-crossing": "^1.1.0",
     "@vtbag/inspection-chamber": "^1.0.22",
     "@vtbag/turn-signal": "^1.3.1",
-    "@vtbag/utensil-drawer": "^1.2.9",
-    "astro": "^5.11.0",
+    "@vtbag/utensil-drawer": "^1.2.11",
+    "astro": "^5.12.0",
     "astro-d2": "^0.8.0",
     "astro-og": "^0.3.0",
     "astro-vtbot": "^2.1.6",
+    "postcss-active-view-transition-type": "^0.0.4",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-external-links": "^3.0.0",
     "rehype-slug": "^6.0.0",

package.json

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("postcss-active-view-transition-type")({ mode: "append" })],
+};

postcss.config.cjs

@@ -79,30 +79,32 @@
           //@ts-ignore
           smallMedia.style.viewTransitionClass = "media";
 
-        mayStartViewTransition({
-          update: () => {
-            dialog.style.viewTransitionName = `dialog`;
-            smallMedia.style.viewTransitionName = "none";
-            bigMedia.style.viewTransitionName = "media";
-            dialog.showModal();
+        mayStartViewTransition(
+          {
+            update: () => {
+              dialog.style.viewTransitionName = `dialog`;
+              smallMedia.style.viewTransitionName = "none";
+              bigMedia.style.viewTransitionName = "media";
+              dialog.showModal();
+            },
+            types: ["media"],
           },
-          types: ["media"],
-        });
+          { useTypesPolyfill: "auto" }
+        );
         dialog.addEventListener(
           "click",
           () => {
             mayStartViewTransition({
-                update: () => {
-                  bigMedia.style.viewTransitionName = "none";
-                  smallMedia.style.viewTransitionName = "media";
-                  dialog.close();
-                },
-                types: ["media"],
-              })
-              .finished.finally(() => {
-                smallMedia.style.viewTransitionName =
-                  dialog.style.viewTransitionName = "none";
-              });
+              update: () => {
+                bigMedia.style.viewTransitionName = "none";
+                smallMedia.style.viewTransitionName = "media";
+                dialog.close();
+              },
+              types: ["media"],
+            }, {useTypesPolyfill: 'auto'}).finished.finally(() => {
+              smallMedia.style.viewTransitionName =
+                dialog.style.viewTransitionName = "none";
+            });
           },
           { once: true }
         );

src/components/Media.astro

@@ -118,6 +118,8 @@ Skipping the transition means that the pseudo-element tree created by the view t
 
 You can dynamically add or remove view transition types during the view transition by modifying the `types` object. Such changes will directly affect CSS rules that use the `:active-view-transition-type` pseudo-class.
 
+View transition types are a feature of Level 2 of the View Transition API. They [can be polyfilled](/tools/utensil-drawer/#the-postcss-active-view-transition-type-postcss-plugin) if you want to use them with Level 1 implementations.
+
 
 ### Canceling and Chaining
 

src/content/docs/basics/javascript.mdx

@@ -364,6 +364,9 @@ There is an additional pseudo-class that does not take type parameters.
 
 This selector will match the the `:root` element while a view transition is active. You can use this for example to [change the shape of the pointer](/tips/pointer/) during view transitions.
 
+
+While view transition types are a Level 2 feature, they [can be polyfilled](/tools/utensil-drawer/#the-postcss-active-view-transition-type-postcss-plugin) if you want to use them with Level 1 implementations.
+
 When you navigate forth and back through the pages of this site, you see an example on how types are used to select different animation.
 
 <Steps>

src/content/docs/basics/styling.mdx

@@ -72,7 +72,8 @@ For the best experience, follow along with your own Starlight site or with the [
 Nearly a year ago, I wrote a [step-by-step guide](https://events-3bg.pages.dev/jotter/starlight/guide/) on using Astro's `<ClientRouter />` component (formerly `<ViewTransitions />`) to give a Starlight site that SPA-like look and feel wih view transitions.
 
 
-**This time things are different:** As you'd expect from `vtbag.dev`, this is not about Astro's client router. We are going browser-native!
+**This time things are different:** As you'd expect from `vtbag.dev`, this is not about Astro's client router. We are going browser-native! Works in browsers with native Level 2 view transition support. 
+
 
 The steps we take are not specific to Astro, and some will be old acquaintances from  earlier _Fun With View Transitions_ episodes, now applied directly to your Starlight site.
 

src/content/docs/fwvt/twinkling.mdx

@@ -130,7 +130,7 @@ One of the main benefits of this pattern is that view transition names are only
 This pattern works well in all current browser versions that natively support the View Transition API.
 Once Firefox adds native support for Level 1 view transitions, this will likely break [because `:active-view-transition-type` is only available with Level 2 of the API](/basics/levels/#same-document-features-missing-in-level-1).
 
-The Bag offers a [polyfill for view transition types](/tools/utensil-drawer/#usetypespolyfill-always--never)  that allows you to use them even with browsers that support only Level 1 of the View Transition API.
+The Bag provides a [polyfill for view transition types](/tools/utensil-drawer/#usetypespolyfill-always--never)  that allows you to use them even with browsers that support only Level 1 of the View Transition API.
 :::
 
 #### Auto-generated View Transition Names