astro 6.0.8 → 6.1.1

package/dist/integrations/hooks.js

@@ -522,7 +522,10 @@ function toIntegrationResolvedRoute(route, trailingSlash) {
     type: route.type,
     pathname: route.pathname,
     redirect: route.redirect,
-    redirectRoute: route.redirectRoute ? toIntegrationResolvedRoute(route.redirectRoute, trailingSlash) : void 0
+    redirectRoute: route.redirectRoute ? toIntegrationResolvedRoute(route.redirectRoute, trailingSlash) : void 0,
+    fallbackRoutes: route.fallbackRoutes.map(
+      (fallbackRoute) => toIntegrationResolvedRoute(fallbackRoute, trailingSlash)
+    )
   };
 }
 export {

package/dist/jsx/rehype.js

@@ -182,7 +182,7 @@ function addClientOnlyMetadata(node, meta, resolvedPath) {
       value: node.name
     });
   }
-  if (!attributeNames.includes("client:component-hydpathation")) {
+  if (!attributeNames.includes("client:component-path")) {
     node.attributes.push({
       type: "mdxJsxAttribute",
       name: "client:component-path",

package/dist/manifest/serialized.js

@@ -58,6 +58,11 @@ function serializedManifestPlugin({
       server.watcher.on("unlink", (path) => reloadManifest(path, server));
       server.watcher.on("change", (path) => reloadManifest(path, server));
     },
+    // Restrict to server environments only since the generated code imports
+    // server-only virtual modules (virtual:astro:routes, virtual:astro:pages)
+    applyToEnvironment(environment) {
+      return environment.name === ASTRO_VITE_ENVIRONMENT_NAMES.astro || environment.name === ASTRO_VITE_ENVIRONMENT_NAMES.ssr || environment.name === ASTRO_VITE_ENVIRONMENT_NAMES.prerender;
+    },
     resolveId: {
       filter: {
         id: new RegExp(`^${SERIALIZED_MANIFEST_ID}$`)

package/dist/manifest/virtual-module.d.ts

@@ -1,2 +1,5 @@
 import type { Plugin } from 'vite';
-export default function virtualModulePlugin(): Plugin;
+import type { AstroSettings } from '../types/astro.js';
+export default function virtualModulePlugin({ settings }: {
+    settings: AstroSettings;
+}): Plugin;

package/dist/manifest/virtual-module.js

@@ -1,11 +1,46 @@
 import { AstroError, AstroErrorData } from "../core/errors/index.js";
 import { SERIALIZED_MANIFEST_ID } from "./serialized.js";
 import { ASTRO_VITE_ENVIRONMENT_NAMES } from "../core/constants.js";
+import { fromRoutingStrategy, toFallbackType, toRoutingStrategy } from "../core/app/common.js";
 const VIRTUAL_SERVER_ID = "astro:config/server";
 const RESOLVED_VIRTUAL_SERVER_ID = "\0" + VIRTUAL_SERVER_ID;
 const VIRTUAL_CLIENT_ID = "astro:config/client";
 const RESOLVED_VIRTUAL_CLIENT_ID = "\0" + VIRTUAL_CLIENT_ID;
-function virtualModulePlugin() {
+function virtualModulePlugin({ settings }) {
+  const config = settings.config;
+  let i18nCode = "const i18n = undefined;";
+  if (config.i18n) {
+    const strategy = toRoutingStrategy(config.i18n.routing, config.i18n.domains);
+    const fallbackType = toFallbackType(config.i18n.routing);
+    const routing = fromRoutingStrategy(strategy, fallbackType);
+    i18nCode = `const i18n = {
+  defaultLocale: ${JSON.stringify(config.i18n.defaultLocale)},
+  locales: ${JSON.stringify(config.i18n.locales)},
+  routing: ${JSON.stringify(routing)},
+  fallback: ${JSON.stringify(config.i18n.fallback)}
+};`;
+  }
+  let imageCode = "const image = undefined;";
+  if (config.image) {
+    imageCode = `const image = {
+  objectFit: ${JSON.stringify(config.image.objectFit)},
+  objectPosition: ${JSON.stringify(config.image.objectPosition)},
+  layout: ${JSON.stringify(config.image.layout)},
+};`;
+  }
+  const clientConfigCode = `
+${i18nCode}
+${imageCode}
+const base = ${JSON.stringify(config.base)};
+const trailingSlash = ${JSON.stringify(config.trailingSlash)};
+const site = ${JSON.stringify(config.site)};
+const compressHTML = ${JSON.stringify(config.compressHTML)};
+const build = {
+  format: ${JSON.stringify(config.build.format)},
+};
+
+export { base, i18n, trailingSlash, site, compressHTML, build, image };
+`;
   return {
     name: "astro-manifest-plugin",
     resolveId: {
@@ -27,40 +62,7 @@ function virtualModulePlugin() {
       },
       handler(id) {
         if (id === RESOLVED_VIRTUAL_CLIENT_ID) {
-          const code = `
-import { manifest } from '${SERIALIZED_MANIFEST_ID}'
-import { fromRoutingStrategy } from 'astro/app';
-
-let i18n = undefined;
-if (manifest.i18n) {
-i18n = {
-  defaultLocale: manifest.i18n.defaultLocale,
-  locales: manifest.i18n.locales,
-  routing: fromRoutingStrategy(manifest.i18n.strategy, manifest.i18n.fallbackType),
-  fallback: manifest.i18n.fallback
-  };
-}
-
-let image = undefined;
-if (manifest.image) {
-  image = {
-    objectFit: manifest.image.objectFit,
-    objectPosition: manifest.image.objectPosition,
-    layout: manifest.image.layout,
-  };
-}
-
-const base = manifest.base;
-const trailingSlash = manifest.trailingSlash;
-const site = manifest.site;
-const compressHTML = manifest.compressHTML;
-const build = {
-  format: manifest.buildFormat,
-};
-
-export { base, i18n, trailingSlash, site, compressHTML, build, image };
-				`;
-          return { code };
+          return { code: clientConfigCode };
         }
         if (id === RESOLVED_VIRTUAL_SERVER_ID) {
           if (this.environment.name === ASTRO_VITE_ENVIRONMENT_NAMES.client) {

package/dist/runtime/client/dev-toolbar/apps/audit/rules/a11y.js

@@ -73,6 +73,7 @@ const aria_non_interactive_roles = [
   "form",
   "group",
   "heading",
+  "image",
   "img",
   "list",
   "listitem",
@@ -80,7 +81,6 @@ const aria_non_interactive_roles = [
   "main",
   "marquee",
   "math",
-  "menuitemradio",
   "navigation",
   "none",
   "note",
@@ -133,7 +133,7 @@ const a11y_implicit_semantics = /* @__PURE__ */ new Map([
   ["h5", "heading"],
   ["h6", "heading"],
   ["hr", "separator"],
-  ["img", "img"],
+  ["img", "image"],
   ["li", "listitem"],
   ["link", "link"],
   ["main", "main"],
@@ -181,7 +181,7 @@ const ariaAttributes = new Set(
   )
 );
 const ariaRoles = new Set(
-  "alert alertdialog application article banner blockquote button caption cell checkbox code columnheader combobox command complementary composite contentinfo definition deletion dialog directory document emphasis feed figure form generic grid gridcell group heading img input insertion landmark link list listbox listitem log main marquee math meter menu menubar menuitem menuitemcheckbox menuitemradio navigation none note option paragraph presentation progressbar radio radiogroup range region roletype row rowgroup rowheader scrollbar search searchbox section sectionhead select separator slider spinbutton status strong structure subscript superscript switch tab table tablist tabpanel term textbox time timer toolbar tooltip tree treegrid treeitem widget window".split(
+  "alert alertdialog application article banner blockquote button caption cell checkbox code columnheader combobox command complementary composite contentinfo definition deletion dialog directory document emphasis feed figure form generic grid gridcell group heading image img input insertion landmark link list listbox listitem log main marquee math meter menu menubar menuitem menuitemcheckbox menuitemradio navigation none note option paragraph presentation progressbar radio radiogroup range region roletype row rowgroup rowheader scrollbar search searchbox section sectionhead select separator slider spinbutton status strong structure subscript superscript switch tab table tablist tabpanel term textbox time timer toolbar tooltip tree treegrid treeitem widget window".split(
     " "
   )
 );
@@ -451,7 +451,9 @@ const a11y = [
       }
       const elementRoles = role.split(WHITESPACE_REGEX);
       for (const elementRole of elementRoles) {
-        const { requiredProps } = roles.get(elementRole);
+        const roleData = roles.get(normalizeAriaRole(elementRole));
+        if (!roleData) continue;
+        const { requiredProps } = roleData;
         const required_role_props = Object.keys(requiredProps);
         const missingProps = required_role_props.filter((prop) => !element.hasAttribute(prop));
         if (missingProps.length > 0) {
@@ -477,7 +479,9 @@ const a11y = [
       if (!role) return false;
       const elementRoles = role.split(WHITESPACE_REGEX);
       for (const elementRole of elementRoles) {
-        const { props } = roles.get(elementRole);
+        const roleData = roles.get(normalizeAriaRole(elementRole));
+        if (!roleData) continue;
+        const { props } = roleData;
         const attributes = getAttributeObject(element);
         const unsupportedAttributes = aria.keys().filter((attribute) => !(attribute in props));
         const invalidAttributes = Object.keys(attributes).filter(
@@ -546,6 +550,12 @@ function menuitem_implicit_role(attributes) {
   if (!type) return;
   return menuitem_type_to_implicit_role.get(type);
 }
+const ariaQueryRoleAliases = {
+  image: "img"
+};
+function normalizeAriaRole(role) {
+  return ariaQueryRoleAliases[role] ?? role;
+}
 function getRole(element) {
   if (element.hasAttribute("role")) {
     return element.getAttribute("role");

package/dist/runtime/server/render/astro/factory.js

@@ -1,16 +1,15 @@
+import {
+  getPropagationHint as getHint,
+  isPropagatingHint
+} from "../../../../core/head-propagation/resolver.js";
 function isAstroComponentFactory(obj) {
   return obj == null ? false : obj.isAstroComponentFactory === true;
 }
 function isAPropagatingComponent(result, factory) {
-  const hint = getPropagationHint(result, factory);
-  return hint === "in-tree" || hint === "self";
+  return isPropagatingHint(getPropagationHint(result, factory));
 }
 function getPropagationHint(result, factory) {
-  let hint = factory.propagation || "none";
-  if (factory.moduleId && result.componentMetadata.has(factory.moduleId) && hint === "none") {
-    hint = result.componentMetadata.get(factory.moduleId).propagation;
-  }
-  return hint;
+  return getHint(result, factory);
 }
 export {
   getPropagationHint,

package/dist/runtime/server/render/astro/instance.js

@@ -1,6 +1,6 @@
 import { isPromise } from "../../util.js";
 import { renderChild } from "../any.js";
-import { isAPropagatingComponent } from "./factory.js";
+import { registerIfPropagating } from "../head-propagation/runtime.js";
 import { isHeadAndContent } from "./head-and-content.js";
 const astroComponentInstanceSym = /* @__PURE__ */ Symbol.for("astro.componentInstance");
 class AstroComponentInstance {
@@ -70,9 +70,7 @@ function validateComponentProps(props, clientDirectives, displayName) {
 function createAstroComponentInstance(result, displayName, factory, props, slots = {}) {
   validateComponentProps(props, result.clientDirectives, displayName);
   const instance = new AstroComponentInstance(result, props, slots, factory);
-  if (isAPropagatingComponent(result, factory)) {
-    result._metadata.propagators.add(instance);
-  }
+  registerIfPropagating(result, factory, instance);
   return instance;
 }
 function isAstroComponentInstance(obj) {

package/dist/runtime/server/render/astro/render.js

@@ -7,6 +7,7 @@ import {
   encoder
 } from "../common.js";
 import { promiseWithResolvers } from "../util.js";
+import { bufferPropagatedHead } from "../head-propagation/runtime.js";
 import { isHeadAndContent } from "./head-and-content.js";
 import { isRenderTemplateResult } from "./render-template.js";
 const DOCTYPE_EXP = /<!doctype html/i;
@@ -122,17 +123,7 @@ async function callComponentAsTemplateResultOrResponse(result, componentFactory,
   return factoryResult;
 }
 async function bufferHeadContent(result) {
-  const iterator = result._metadata.propagators.values();
-  while (true) {
-    const { value, done } = iterator.next();
-    if (done) {
-      break;
-    }
-    const returnValue = await value.init(result);
-    if (isHeadAndContent(returnValue) && returnValue.head) {
-      result._metadata.extraHead.push(returnValue.head);
-    }
-  }
+  await bufferPropagatedHead(result);
 }
 async function renderToAsyncIterable(result, componentFactory, props, children, isPage = false, route) {
   const templateResult = await callComponentAsTemplateResultOrResponse(

package/dist/runtime/server/render/common.js

@@ -4,6 +4,7 @@ import {
   determinesIfNeedsDirectiveScript,
   getPrescripts
 } from "../scripts.js";
+import { getInstructionRenderState, shouldRenderInstruction } from "./head-propagation/runtime.js";
 import { renderAllHeadContent } from "./head.js";
 import { isRenderInstruction } from "./instruction.js";
 import { renderServerIslandRuntime } from "./server-islands.js";
@@ -31,13 +32,13 @@ function stringifyChunk(result, chunk) {
         }
       }
       case "head": {
-        if (result._metadata.hasRenderedHead || result.partial) {
+        if (!shouldRenderInstruction("head", getInstructionRenderState(result))) {
           return "";
         }
         return renderAllHeadContent(result);
       }
       case "maybe-head": {
-        if (result._metadata.hasRenderedHead || result._metadata.headInTree || result.partial) {
+        if (!shouldRenderInstruction("maybe-head", getInstructionRenderState(result))) {
           return "";
         }
         return renderAllHeadContent(result);

package/dist/runtime/server/render/head-propagation/runtime.d.ts

@@ -0,0 +1,20 @@
+import { type HeadInstructionRenderState } from '../../../../core/head-propagation/policy.js';
+import type { SSRResult } from '../../../../types/public/internal.js';
+import type { AstroComponentFactory } from '../astro/factory.js';
+/** Facade helper used by runtime adapters to read effective hint resolution. */
+export declare function getPropagationHint(result: SSRResult, factory: AstroComponentFactory): import("../../../../types/public/internal.js").PropagationHint;
+/**
+ * Registers an instance in the propagation set when its hint requires buffering.
+ *
+ * @example
+ * A runtime-created component with `propagation: 'self'` is registered so its
+ * styles can be collected before head flush.
+ */
+export declare function registerIfPropagating(result: SSRResult, factory: AstroComponentFactory, instance: {
+    init(result: SSRResult): unknown | Promise<unknown>;
+}): void;
+export declare function bufferPropagatedHead(result: SSRResult): Promise<void>;
+/** Facade helper for render instruction gating (`head` vs `maybe-head`). */
+export declare function shouldRenderInstruction(type: 'head' | 'maybe-head', state: HeadInstructionRenderState): boolean;
+/** Projects `SSRResult` into the minimal state needed by instruction policy. */
+export declare function getInstructionRenderState(result: SSRResult): HeadInstructionRenderState;

package/dist/runtime/server/render/head-propagation/runtime.js

@@ -0,0 +1,53 @@
+import { collectPropagatedHeadParts } from "../../../../core/head-propagation/buffer.js";
+import {
+  getPropagationHint as getHint,
+  isPropagatingHint
+} from "../../../../core/head-propagation/resolver.js";
+import {
+  shouldRenderInstruction as shouldRenderInstructionByPolicy
+} from "../../../../core/head-propagation/policy.js";
+import { isHeadAndContent } from "../astro/head-and-content.js";
+function getPropagationHint(result, factory) {
+  return getHint(result, factory);
+}
+function registerIfPropagating(result, factory, instance) {
+  if (factory.propagation === "self" || factory.propagation === "in-tree") {
+    result._metadata.propagators.add(
+      instance
+    );
+    return;
+  }
+  if (factory.moduleId) {
+    const hint = result.componentMetadata.get(factory.moduleId)?.propagation;
+    if (isPropagatingHint(hint ?? "none")) {
+      result._metadata.propagators.add(
+        instance
+      );
+    }
+  }
+}
+async function bufferPropagatedHead(result) {
+  const collected = await collectPropagatedHeadParts({
+    propagators: result._metadata.propagators,
+    result,
+    isHeadAndContent
+  });
+  result._metadata.extraHead.push(...collected);
+}
+function shouldRenderInstruction(type, state) {
+  return shouldRenderInstructionByPolicy(type, state);
+}
+function getInstructionRenderState(result) {
+  return {
+    hasRenderedHead: result._metadata.hasRenderedHead,
+    headInTree: result._metadata.headInTree,
+    partial: result.partial
+  };
+}
+export {
+  bufferPropagatedHead,
+  getInstructionRenderState,
+  getPropagationHint,
+  registerIfPropagating,
+  shouldRenderInstruction
+};

package/dist/runtime/server/render/page.js

@@ -1,6 +1,7 @@
 import { renderToAsyncIterable, renderToReadableStream, renderToString } from "./astro/render.js";
 import { encoder } from "./common.js";
 import { renderComponentToString } from "./component.js";
+import { markHTMLString } from "../escape.js";
 import { renderCspContent } from "./csp.js";
 import { isDeno, isNode } from "./util.js";
 import { isAstroComponentFactory } from "./astro/factory.js";
@@ -13,7 +14,10 @@ async function renderPage(result, componentFactory, props, children, streaming,
     const pageProps = { ...props ?? {}, "server:root": true };
     let str;
     if (result._experimentalQueuedRendering && result._experimentalQueuedRendering.enabled) {
-      const vnode = await componentFactory(pageProps);
+      let vnode = await componentFactory(pageProps);
+      if (componentFactory["astro:html"] && typeof vnode === "string") {
+        vnode = markHTMLString(vnode);
+      }
       const queue = await buildRenderQueue(
         vnode,
         result,

package/dist/runtime/server/transition.d.ts

@@ -1,9 +1,27 @@
 import type { SSRResult } from '../../types/public/internal.js';
-import type { TransitionAnimationPair, TransitionAnimationValue } from '../../types/public/view-transitions.js';
+import type { TransitionAnimation, TransitionAnimationPair, TransitionAnimationValue } from '../../types/public/view-transitions.js';
 export declare function createTransitionScope(result: SSRResult, hash: string): string;
+export declare function reEncode(s: string): string;
 export declare function renderTransition(result: SSRResult, hash: string, animationName: TransitionAnimationValue | undefined, transitionName: string): string;
 /** @deprecated This will be removed in Astro 7 */
 export declare function createAnimationScope(transitionName: string, animations: Record<string, TransitionAnimationPair>): {
     scope: string;
     styles: string;
 };
+export declare class ViewTransitionStyleSheet {
+    private scope;
+    private name;
+    private modern;
+    private fallback;
+    constructor(scope: string, name: string);
+    toString(): string;
+    private layer;
+    private addRule;
+    addAnimationRaw(image: 'old' | 'new' | 'group', animation: string): void;
+    addModern(image: 'old' | 'new' | 'group', animation: string): void;
+    addFallback(image: 'old' | 'new' | 'group', animation: string): void;
+    addAnimationPair(direction: 'forwards' | 'backwards' | string, image: 'old' | 'new', rules: TransitionAnimation | TransitionAnimation[]): void;
+}
+export declare function stringifyAnimation(anim: TransitionAnimation | TransitionAnimation[]): string;
+export declare function stringifyAnimations(anims: TransitionAnimation[]): string;
+export declare function toTimeValue(num: number | string): string;

package/dist/runtime/server/transition.js

@@ -174,7 +174,12 @@ function toTimeValue(num) {
   return typeof num === "number" ? num + "ms" : num;
 }
 export {
+  ViewTransitionStyleSheet,
   createAnimationScope,
   createTransitionScope,
-  renderTransition
+  reEncode,
+  renderTransition,
+  stringifyAnimation,
+  stringifyAnimations,
+  toTimeValue
 };

package/dist/transitions/events.d.ts

@@ -9,7 +9,7 @@ export declare const TRANSITION_BEFORE_SWAP = "astro:before-swap";
 export declare const TRANSITION_AFTER_SWAP = "astro:after-swap";
 /** @deprecated This will be removed in Astro 7 */
 export declare const TRANSITION_PAGE_LOAD = "astro:page-load";
-type Events = typeof TRANSITION_AFTER_PREPARATION | typeof TRANSITION_AFTER_SWAP | typeof TRANSITION_PAGE_LOAD;
+type Events = 'astro:after-preparation' | 'astro:after-swap' | 'astro:page-load';
 export declare const triggerEvent: (name: Events) => boolean;
 export declare const onPageLoad: () => boolean;
 declare class BeforeEvent extends Event {

package/dist/transitions/events.js

@@ -5,7 +5,7 @@ const TRANSITION_BEFORE_SWAP = "astro:before-swap";
 const TRANSITION_AFTER_SWAP = "astro:after-swap";
 const TRANSITION_PAGE_LOAD = "astro:page-load";
 const triggerEvent = (name) => document.dispatchEvent(new Event(name));
-const onPageLoad = () => triggerEvent(TRANSITION_PAGE_LOAD);
+const onPageLoad = () => triggerEvent("astro:page-load");
 class BeforeEvent extends Event {
   from;
   to;
@@ -43,7 +43,7 @@ class TransitionBeforePreparationEvent extends BeforeEvent {
   loader;
   constructor(from, to, direction, navigationType, sourceElement, info, newDocument, signal, formData, loader) {
     super(
-      TRANSITION_BEFORE_PREPARATION,
+      "astro:before-preparation",
       { cancelable: true },
       from,
       to,
@@ -62,14 +62,14 @@ class TransitionBeforePreparationEvent extends BeforeEvent {
     });
   }
 }
-const isTransitionBeforeSwapEvent = (value) => value.type === TRANSITION_BEFORE_SWAP;
+const isTransitionBeforeSwapEvent = (value) => value.type === "astro:before-swap";
 class TransitionBeforeSwapEvent extends BeforeEvent {
   direction;
   viewTransition;
   swap;
   constructor(afterPreparation, viewTransition) {
     super(
-      TRANSITION_BEFORE_SWAP,
+      "astro:before-swap",
       void 0,
       afterPreparation.from,
       afterPreparation.to,
@@ -106,7 +106,7 @@ async function doPreparation(from, to, direction, navigationType, sourceElement,
   if (document.dispatchEvent(event)) {
     await event.loader();
     if (!event.defaultPrevented) {
-      triggerEvent(TRANSITION_AFTER_PREPARATION);
+      triggerEvent("astro:after-preparation");
       if (event.navigationType !== "traverse") {
         updateScrollPosition({ scrollX, scrollY });
       }

package/dist/transitions/router.js

@@ -1,12 +1,5 @@
 import { internalFetchHeaders } from "virtual:astro:adapter-config/client";
-import {
-  doPreparation,
-  doSwap,
-  TRANSITION_AFTER_SWAP,
-  onPageLoad,
-  triggerEvent,
-  updateScrollPosition
-} from "./events.js";
+import { doPreparation, doSwap, onPageLoad, triggerEvent, updateScrollPosition } from "./events.js";
 import { detectScriptExecuted } from "./swap-functions.js";
 const inBrowser = import.meta.env.SSR === false;
 const supportsViewTransitions = inBrowser && !!document.startViewTransition;
@@ -212,13 +205,11 @@ async function updateDOM(preparationEvent, options, currentTransition, historySt
     animateFallbackOld
   );
   moveToLocation(swapEvent.to, swapEvent.from, options, pageTitleForBrowserHistory, historyState);
-  triggerEvent(TRANSITION_AFTER_SWAP);
-  if (fallback === "animate") {
-    if (!currentTransition.transitionSkipped && !swapEvent.signal.aborted) {
-      animate("new").finally(() => currentTransition.viewTransitionFinished());
-    } else {
-      currentTransition.viewTransitionFinished();
-    }
+  triggerEvent("astro:after-swap");
+  if (fallback === "animate" && !currentTransition.transitionSkipped && !swapEvent.signal.aborted) {
+    animate("new").finally(() => currentTransition.viewTransitionFinished());
+  } else {
+    currentTransition.viewTransitionFinished?.();
   }
 }
 function abortAndRecreateMostRecentNavigation() {
@@ -227,7 +218,7 @@ function abortAndRecreateMostRecentNavigation() {
     controller: new AbortController()
   };
 }
-async function transition(direction, from, to, options, historyState) {
+async function transition(direction, from, to, options, historyState, hasUAVisualTransition = false) {
   const currentNavigation = abortAndRecreateMostRecentNavigation();
   if (!transitionEnabledOnThisPage() || location.origin !== to.origin) {
     if (currentNavigation === mostRecentNavigation) mostRecentNavigation = void 0;
@@ -323,14 +314,20 @@ async function transition(direction, from, to, options, historyState) {
     return;
   }
   document.documentElement.setAttribute(DIRECTION_ATTR, prepEvent.direction);
-  if (supportsViewTransitions) {
+  if (supportsViewTransitions && !hasUAVisualTransition) {
     currentTransition.viewTransition = document.startViewTransition(
       async () => await updateDOM(prepEvent, options, currentTransition, historyState)
     );
   } else {
     const updateDone = (async () => {
       await Promise.resolve();
-      await updateDOM(prepEvent, options, currentTransition, historyState, getFallback());
+      await updateDOM(
+        prepEvent,
+        options,
+        currentTransition,
+        historyState,
+        hasUAVisualTransition ? "swap" : getFallback()
+      );
       return void 0;
     })();
     currentTransition.viewTransition = {
@@ -396,7 +393,14 @@ function onPopState(ev) {
   const nextIndex = state.index;
   const direction = nextIndex > currentHistoryIndex ? "forward" : "back";
   currentHistoryIndex = nextIndex;
-  transition(direction, originalLocation, new URL(location.href), {}, state);
+  transition(
+    direction,
+    originalLocation,
+    new URL(location.href),
+    {},
+    state,
+    ev.hasUAVisualTransition
+  );
 }
 const onScrollEnd = () => {
   if (history.state && (scrollX !== history.state.scrollX || scrollY !== history.state.scrollY)) {

package/dist/transitions/swap-functions.js

@@ -116,6 +116,12 @@ const persistedHeadElement = (el, newDoc) => {
     const href = el.getAttribute("href");
     return newDoc.head.querySelector(`link[rel=stylesheet][href="${href}"]`);
   }
+  if (import.meta.env.DEV && el.tagName === "STYLE") {
+    const viteDevId = el.getAttribute("data-vite-dev-id");
+    if (viteDevId) {
+      return newDoc.head.querySelector(`style[data-vite-dev-id="${viteDevId}"]`);
+    }
+  }
   if (el.tagName === "STYLE" && el.textContent) {
     const styles = newDoc.head.querySelectorAll("style");
     for (const s of styles) {