@xingwangzhe/stalux 1.54.0 → 1.54.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.54.0",
+    "version": "1.54.1",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",

package/src/internal/swup-debug-plugin.ts

@@ -1,4 +1,6 @@
+import { readFileSync } from "node:fs";
 import { createRequire } from "node:module";
+import { dirname, resolve } from "node:path";
 import type { Plugin } from "vite";
 
 /** Keep a source-only devDependency optional in published consumer projects. */
@@ -7,7 +9,18 @@ export function swupDebugPlugin(development: boolean): Plugin {
     let entry: string | undefined;
     if (development) {
         try {
-            entry = createRequire(import.meta.url).resolve("@swup/debug-plugin");
+            // require.resolve honours the "require" condition and returns the CJS
+            // build. Re-exporting that from a virtual ESM module makes the browser
+            // fail with "does not provide an export named 'default'". Pick the
+            // package's ESM entry from its manifest instead.
+            const cjs = createRequire(import.meta.url).resolve("@swup/debug-plugin");
+            const manifest = resolve(dirname(cjs), "../package.json");
+            const pkg = JSON.parse(readFileSync(manifest, "utf8")) as {
+                exports?: { "."?: { import?: string } };
+                module?: string;
+            };
+            const esm = pkg.exports?.["."]?.import ?? pkg.module;
+            if (esm) entry = resolve(dirname(manifest), esm);
         } catch {
             // Consumers can install @swup/debug-plugin as their own devDependency.
         }

package/src/scripts/swup-router.ts

@@ -36,6 +36,7 @@ interface NavigationContext {
     incomingDocument?: Document;
     removeOutgoing?: () => void;
     obsoleteStyles: Element[];
+    pruneObsoleteStyles?: () => void;
     glide?: PageGlide;
     releaseOutgoing?: () => void;
 }
@@ -405,7 +406,17 @@ export function installSwupRouter(): Swup {
         // motion.start, in the same synchronous block as the entry cue: releasing
         // it here would paint the new document fully visible for one frame.
         if (context.controller.signal.aborted) return;
-        for (const element of context.obsoleteStyles) element.remove();
+        // ParallelPlugin keeps the outgoing container visible while it fades out
+        // and only removes it at visit:end / content:remove. Its page-scoped CSS
+        // must outlive that DOM: pruning here paints the outgoing (and already
+        // overlapping) content unstyled for the whole overlap. `awaitAssets`
+        // only covers the incoming stylesheets, not the outgoing ones.
+        const pruneObsoleteStyles = once(() => {
+            for (const element of context.obsoleteStyles) element.remove();
+        });
+        context.pruneObsoleteStyles = pruneObsoleteStyles;
+        if (context.outgoingReady) void context.outgoingReady.then(pruneObsoleteStyles);
+        else pruneObsoleteStyles();
         const incomingStyles = [...next.head.querySelectorAll("style,link[rel=stylesheet]")];
         authoredStyles = [...document.head.querySelectorAll("style,link[rel=stylesheet]")].filter(
             (el) => incomingStyles.some((other) => el.isEqualNode(other)),
@@ -513,6 +524,9 @@ export function installSwupRouter(): Swup {
         const context = contexts.get(visit);
         context?.controller.abort();
         context?.removeOutgoing?.();
+        // An aborted visit never reaches visit:end, so its outgoing CSS has to
+        // be released here or it would linger in head forever.
+        context?.pruneObsoleteStyles?.();
         context?.glide?.cancel();
         // An aborted visit keeps no exit fill: without this the stage would stay
         // transparent until the next successful navigation.
@@ -528,6 +542,9 @@ export function installSwupRouter(): Swup {
     swup.hooks.on("visit:fail", cancel);
     swup.hooks.on("visit:end", (visit) => {
         const context = contexts.get(visit);
+        // Safety net for paths where the exit animation never settles. The prune
+        // is idempotent, so a completed outgoingReady does not remove twice.
+        context?.pruneObsoleteStyles?.();
         context?.glide?.cancel();
         context?.releaseOutgoing?.();
         context?.motion?.start(null, { skip: true });