wxt 0.20.2 → 0.20.3

package/dist/core/builders/vite/plugins/devHtmlPrerender.mjs

@@ -55,11 +55,11 @@ export function devHtmlPrerender(config, server) {
         const inlineScripts = document.querySelectorAll("script:not([src])");
         inlineScripts.forEach((script) => {
           const textContent = script.textContent ?? "";
-          const textHash = hash(textContent);
-          inlineScriptContents[textHash] = textContent;
+          const key = hash(textContent);
+          inlineScriptContents[key] = textContent;
           const virtualScript = document.createElement("script");
           virtualScript.type = "module";
-          virtualScript.src = `${server.origin}/@id/${virtualInlineScript}?${textHash}`;
+          virtualScript.src = `${server.origin}/@id/${virtualInlineScript}?${key}`;
           script.replaceWith(virtualScript);
         });
         const viteClientScript = document.querySelector(
@@ -76,7 +76,7 @@ export function devHtmlPrerender(config, server) {
       }
     },
     {
-      name: "wxt:virtualize-react-refresh",
+      name: "wxt:virtualize-inline-scripts",
       apply: "serve",
       resolveId(id) {
         if (id.startsWith(virtualInlineScript)) {
@@ -88,8 +88,8 @@ export function devHtmlPrerender(config, server) {
       },
       load(id) {
         if (id.startsWith(resolvedVirtualInlineScript)) {
-          const newHash = hash(id.substring(id.indexOf("?")));
-          return inlineScriptContents[newHash];
+          const key = id.substring(id.indexOf("?") + 1);
+          return inlineScriptContents[key];
         }
         if (id === "\0noop") {
           return "";

package/dist/utils/content-script-ui/shadow-root.mjs

@@ -2,7 +2,9 @@ import { browser } from "wxt/browser";
 import { createIsolatedElement } from "@webext-core/isolated-element";
 import { applyPosition, createMountFunctions, mountUi } from "./shared.mjs";
 import { logger } from "../internal/logger.mjs";
+import { splitShadowRootCss } from "../split-shadow-root-css.mjs";
 export async function createShadowRootUi(ctx, options) {
+  const instanceId = crypto.randomUUID();
   const css = [];
   if (!options.inheritStyles) {
     css.push(`/* WXT Shadow Root Reset */ body{all:initial;}`);
@@ -14,6 +16,7 @@ export async function createShadowRootUi(ctx, options) {
     const entryCss = await loadCss();
     css.push(entryCss.replaceAll(":root", ":host"));
   }
+  const { shadowCss, documentCss } = splitShadowRootCss(css.join("\n").trim());
   const {
     isolatedElement: uiContainer,
     parentElement: shadowHost,
@@ -21,7 +24,7 @@ export async function createShadowRootUi(ctx, options) {
   } = await createIsolatedElement({
     name: options.name,
     css: {
-      textContent: css.join("\n").trim()
+      textContent: shadowCss
     },
     mode: options.mode ?? "open",
     isolateEvents: options.isolateEvents
@@ -31,11 +34,23 @@ export async function createShadowRootUi(ctx, options) {
   const mount = () => {
     mountUi(shadowHost, options);
     applyPosition(shadowHost, shadow.querySelector("html"), options);
+    if (documentCss && !document.querySelector(
+      `style[wxt-shadow-root-document-styles="${instanceId}"]`
+    )) {
+      const style = document.createElement("style");
+      style.textContent = documentCss;
+      style.setAttribute("wxt-shadow-root-document-styles", instanceId);
+      (document.head ?? document.body).append(style);
+    }
     mounted = options.onMount(uiContainer, shadow, shadowHost);
   };
   const remove = () => {
     options.onRemove?.(mounted);
     shadowHost.remove();
+    const documentStyle = document.querySelector(
+      `style[wxt-shadow-root-document-styles="${instanceId}"]`
+    );
+    documentStyle?.remove();
     while (uiContainer.lastChild)
       uiContainer.removeChild(uiContainer.lastChild);
     mounted = void 0;

package/dist/utils/split-shadow-root-css.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Given a CSS string that will be loaded into a shadow root, split it into two parts:
+ * - `documentCss`: CSS that needs to be applied to the document (like `@property`)
+ * - `shadowCss`: CSS that needs to be applied to the shadow root
+ * @param css
+ */
+export declare function splitShadowRootCss(css: string): {
+    documentCss: string;
+    shadowCss: string;
+};

package/dist/utils/split-shadow-root-css.mjs

@@ -0,0 +1,14 @@
+export function splitShadowRootCss(css) {
+  let shadowCss = css;
+  let documentCss = "";
+  const rulesRegex = /(\s*@property[\s\S]*?{[\s\S]*?})/gm;
+  let match;
+  while ((match = rulesRegex.exec(css)) !== null) {
+    documentCss += match[1];
+    shadowCss = shadowCss.replace(match[1], "");
+  }
+  return {
+    documentCss: documentCss.trim(),
+    shadowCss: shadowCss.trim()
+  };
+}

package/dist/version.mjs

@@ -1 +1 @@
-export const version = "0.20.2";
+export const version = "0.20.3";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.20.2",
+  "version": "0.20.3",
   "description": "⚡ Next-gen Web Extension Framework",
   "license": "MIT",
   "dependencies": {
@@ -156,6 +156,10 @@
       "types": "./dist/utils/match-patterns.d.ts",
       "default": "./dist/utils/match-patterns.mjs"
     },
+    "./utils/split-shadow-root-css": {
+      "types": "./dist/utils/split-shadow-root-css.d.ts",
+      "default": "./dist/utils/split-shadow-root-css.mjs"
+    },
     "./utils/storage": {
       "types": "./dist/utils/storage.d.ts",
       "default": "./dist/utils/storage.mjs"