Merge branch 'main' into fix/vite-hmr

package.json

@@ -39,8 +39,8 @@
         "@phosphor-icons/react": "^2.1.7",
         "@sentry/react": "^8.55.0",
         "@tanstack/react-query": "^5.69.0",
-        "@unocss/vite": "^0.63.6",
-        "@vitejs/plugin-react": "^4.3.4",
+		"@unocss/vite": "^66.5.1",
+		"@vitejs/plugin-react": "^5.0.2",
         "chrome-extension-toolkit": "^0.0.54",
         "clsx": "^2.1.1",
         "conventional-changelog": "^6.0.0",
@@ -66,7 +66,7 @@
         "@commitlint/cli": "^19.7.1",
         "@commitlint/config-conventional": "^19.7.1",
         "@commitlint/types": "^19.5.0",
-        "@crxjs/vite-plugin": "2.0.0-beta.21",
+		"@crxjs/vite-plugin": "2.2.0",
         "@iconify-json/bi": "^1.2.2",
         "@iconify-json/ic": "^1.2.2",
         "@iconify-json/iconoir": "^1.2.7",
@@ -88,7 +88,7 @@
         "@types/conventional-changelog": "^3.1.5",
         "@types/gulp": "^4.0.17",
         "@types/gulp-zip": "^4.0.4",
-        "@types/node": "^22.13.5",
+		"@types/node": "^22.18.0",
         "@types/prompts": "^2.4.9",
         "@types/react": "^18.3.18",
         "@types/react-dom": "^18.3.5",
@@ -98,14 +98,14 @@
         "@types/sql.js": "^1.4.9",
         "@typescript-eslint/eslint-plugin": "^7.18.0",
         "@typescript-eslint/parser": "^7.18.0",
-        "@unocss/eslint-config": "^0.63.6",
-        "@unocss/postcss": "^0.63.6",
-        "@unocss/preset-uno": "^0.63.6",
-        "@unocss/preset-web-fonts": "^0.63.6",
-        "@unocss/reset": "^0.63.6",
-        "@unocss/transformer-directives": "^0.63.6",
-        "@unocss/transformer-variant-group": "^0.63.6",
-        "@vitejs/plugin-react-swc": "^3.8.0",
+		"@unocss/eslint-config": "^66.5.1",
+		"@unocss/postcss": "^66.5.1",
+		"@unocss/preset-web-fonts": "^66.5.1",
+		"@unocss/preset-wind4": "^66.5.1",
+		"@unocss/reset": "^66.5.1",
+		"@unocss/transformer-directives": "^66.5.1",
+		"@unocss/transformer-variant-group": "^66.5.1",
+		"@vitejs/plugin-react-swc": "^4.0.1",
         "@vitest/coverage-v8": "^2.1.9",
         "@vitest/ui": "^2.1.9",
         "chalk": "^5.4.1",
@@ -141,11 +141,11 @@
         "semantic-release": "^24.2.3",
         "storybook": "^8.6.0",
         "typescript": "^5.7.3",
-        "unocss": "^0.63.6",
-        "unocss-preset-primitives": "0.0.2-beta.1",
+		"unocss": "^66.5.1",
+		"unocss-preset-primitives": "0.0.2-beta.2",
         "unplugin-icons": "^0.19.3",
-        "vite": "^5.4.14",
-        "vite-plugin-inspect": "^0.8.9",
+		"vite": "^7.1.5",
+		"vite-plugin-inspect": "^11.3.3",
         "vitest": "^2.1.9"
     },
     "engineStrict": true,
@@ -154,12 +154,12 @@
     },
     "pnpm": {
         "patchedDependencies": {
-            "@crxjs/vite-plugin@2.0.0-beta.21": "patches/@crxjs__vite-plugin@2.0.0-beta.21.patch",
-            "@unocss/vite": "patches/@unocss__vite.patch"
+			"@unocss/vite": "patches/@unocss__vite.patch",
+			"@crxjs/vite-plugin": "patches/@crxjs__vite-plugin.patch"
         },
-        "overrides": {
-            "es-module-lexer": "^1.5.4"
-        }
+		"onlyBuiltDependencies": [
+			"@swc/core"
+		]
     },
     "volta": {
         "node": "20.19.4",

patches/@crxjs__vite-plugin@2.0.0-beta.21.patch

@@ -1,105 +0,0 @@
-diff --git a/dist/index.mjs b/dist/index.mjs
-index 5c3f6291168987c56b816428080e6f1fe9de7107..abaf6290fe9454ae036a81eacbe7dc3be2fdfbc3 100644
---- a/dist/index.mjs
-+++ b/dist/index.mjs
-@@ -499,16 +499,43 @@ ${sourceMap}
-     }),
-     mergeMap(async ({ target, code, deps }) => {
-       await lexer.init;
--      const [imports] = lexer.parse(code, fileName);
-+      const [imports, exports] = lexer.parse(code, fileName);
-       const depSet = new Set(deps);
-       const magic = new MagicString(code);
--      for (const i of imports)
-+      for (const i of imports) {
-         if (i.n) {
-           depSet.add(i.n);
-           const fileName2 = getFileName({ type: "module", id: i.n });
-           const fullImport = code.substring(i.s, i.e);
--          magic.overwrite(i.s, i.e, fullImport.replace(i.n, `/${fileName2}`));
-+          const hmrTimestamp = fullImport.match(/\bt=\d{13}&?\b/);
-+          magic.overwrite(
-+            i.s,
-+            i.e,
-+            fullImport.replace(
-+              i.n,
-+              `/${fileName2}${hmrTimestamp ? `?${hmrTimestamp[0]}` : ""}`
-+            )
-+          );
-+        }
-+      }
-+      for (const e of exports) {
-+        if (e.n === "default") {
-+          const regex = /\s+['"](.*)['"]/y;
-+          regex.lastIndex = e.e;
-+          const fullExport = regex.exec(code)?.[1];
-+          if (!fullExport)
-+            continue;
-+          const start = regex.lastIndex - fullExport.length - 1;
-+          const end = regex.lastIndex - 1;
-+          if (fullExport.startsWith("/node_modules")) {
-+            magic.overwrite(
-+              start,
-+              end,
-+              `http://localhost:5173${fullExport}`
-+            );
-+          }
-         }
-+      }
-       return { target, source: magic.toString(), deps: [...depSet] };
-     })
-   );
-@@ -1229,10 +1256,14 @@ const pluginHMR = () => {
-       handleHotUpdate({ modules, server }) {
-         const { root } = server.config;
-         const relFiles = /* @__PURE__ */ new Set();
--        for (const m of modules)
-+        function getRelFile(file) {
-+          return file.startsWith(root) ? file.slice(server.config.root.length) : file;
-+        }
-+        for (const m of modules) {
-           if (m.id?.startsWith(root)) {
-             relFiles.add(m.id.slice(server.config.root.length));
-           }
-+        }
-         if (inputManifestFiles.background.length) {
-           const background = prefix$1("/", inputManifestFiles.background[0]);
-           if (relFiles.has(background) || modules.some(isImporter(join(server.config.root, background)))) {
-@@ -1244,7 +1275,14 @@ const pluginHMR = () => {
-         for (const [key, script] of contentScripts)
-           if (key === script.id) {
-             if (relFiles.has(script.id) || modules.some(isImporter(join(server.config.root, script.id)))) {
--              relFiles.forEach((relFile) => update(relFile));
-+              modules.filter((mod) => mod.id?.startsWith(root)).forEach((mod) => {
-+                update(getRelFile(mod.id));
-+                if (mod.file?.endsWith(".scss")) {
-+                  mod.importers.forEach((imp) => {
-+                    update(getRelFile(imp.id));
-+                  });
-+                }
-+              });
-             }
-           }
-       }
-@@ -1882,7 +1920,7 @@ const pluginWebAccessibleResources = () => {
-         if (contentScripts.size > 0) {
-           const viteManifest = parseJsonAsset(
-             bundle,
--            "manifest.json"
-+            ".vite/manifest.json"
-           );
-           const viteFiles = /* @__PURE__ */ new Map();
-           for (const [, file] of Object.entries(viteManifest))
-diff --git a/package.json b/package.json
-index e0c47ae66ff399ad3a78abf38d8d93d1f038c55d..f84eb09ffbb5c41094935dd06e04ffe831e2d05a 100644
---- a/package.json
-+++ b/package.json
-@@ -70,7 +70,7 @@
-     "connect-injector": "^0.4.4",
-     "convert-source-map": "^1.7.0",
-     "debug": "^4.3.3",
--    "es-module-lexer": "^0.10.0",
-+    "es-module-lexer": "^1.4.1",
-     "fast-glob": "^3.2.11",
-     "fs-extra": "^10.0.1",
-     "jsesc": "^3.0.2",

patches/@unocss__vite.patch

@@ -1,8 +1,8 @@
 diff --git a/dist/index.mjs b/dist/index.mjs
-index 7210f5fd650a0b7bb36b467fff85feb0d8e4ec63..c8f98bd314daec0b91c514ea9d9fc2b79cea8502 100644
+index 3b94c870f00ce7e70be208199db48a3bd5569830..4aaaec7d5b656f1c4066c6295d5228d746420d17 100644
 --- a/dist/index.mjs
 +++ b/dist/index.mjs
-@@ -369,15 +369,15 @@ const VIRTUAL_ENTRY_ALIAS = [
+@@ -24,8 +24,8 @@ const VIRTUAL_ENTRY_ALIAS = [
    /^(?:virtual:)?uno(?::(.+))?\.css(\?.*)?$/
  ];
  const LAYER_MARK_ALL = "__ALL__";
@@ -10,27 +10,19 @@ index 7210f5fd650a0b7bb36b467fff85feb0d8e4ec63..c8f98bd314daec0b91c514ea9d9fc2b7
 -const RESOLVED_ID_RE = /[/\\]__uno(?:_(.*?))?\.css$/;
 +const RESOLVED_ID_WITH_QUERY_RE = /[/\\]uno(_.*?)?\.css(\?.*)?$/;
 +const RESOLVED_ID_RE = /[/\\]uno(?:_(.*?))?\.css$/;
- function resolveId(id) {
-   if (id.match(RESOLVED_ID_WITH_QUERY_RE))
-     return id;
+ 
+ const defaultPipelineExclude = [cssIdRE];
+ const defaultPipelineInclude = [/\.(vue|svelte|[jt]sx|vine.ts|mdx?|astro|elm|php|phtml|html)($|\?)/];
+@@ -468,7 +468,7 @@ function resolveId(id, importer) {
    for (const alias of VIRTUAL_ENTRY_ALIAS) {
      const match = id.match(alias);
      if (match) {
--      return match[1] ? `/__uno_${match[1]}.css` : "/__uno.css";
-+      return match[1] ? `/uno_${match[1]}.css` : "/uno.css";
-     }
-   }
- }
-@@ -652,7 +652,7 @@ function GlobalModeBuildPlugin(ctx) {
-         css = await applyCssTransform(css, fakeCssId, options.dir, this);
-         const transformHandler = "handler" in cssPost.transform ? cssPost.transform.handler : cssPost.transform;
-         if (isLegacy) {
--          await transformHandler.call({}, css, "/__uno.css");
-+          await transformHandler.call({}, css, "/uno.css");
-         } else {
-           const hash = getHash(css);
-           await transformHandler.call({}, getHashPlaceholder(hash), fakeCssId);
-@@ -914,7 +914,7 @@ function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules,
+-      let virtual = match[1] ? `__uno_${match[1]}.css` : "__uno.css";
++      let virtual = match[1] ? `uno_${match[1]}.css` : "uno.css";
+       virtual += match[2] || "";
+       if (importer)
+         virtual = resolve$1(importer, "..", virtual);
+@@ -813,7 +813,7 @@ function GlobalModeDevPlugin(ctx) {
          const { hash, css } = await generateCSS(layer);
          return {
            // add hash to the chunk of CSS that it will send back to client to check if there is new CSS generated
@@ -39,7 +31,7 @@ index 7210f5fd650a0b7bb36b467fff85feb0d8e4ec63..c8f98bd314daec0b91c514ea9d9fc2b7
            map: { mappings: "" }
          };
        },
-@@ -933,7 +933,7 @@ function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules,
+@@ -832,7 +832,7 @@ function GlobalModeDevPlugin(ctx) {
          if (layer && code.includes("import.meta.hot")) {
            let hmr = `
  try {

src/manifest.ts

@@ -38,7 +38,12 @@ const manifest = defineManifest(async () => ({
     host_permissions: process.env.MODE === 'development' ? [...HOST_PERMISSIONS, '<all_urls>'] : HOST_PERMISSIONS,
     action: {
         default_popup: 'src/pages/popup/index.html',
-        default_icon: `icons/icon_${mode}_32.png`,
+        default_icon: {
+            '16': `icons/icon_${mode}_16.png`,
+            '32': `icons/icon_${mode}_32.png`,
+            '48': `icons/icon_${mode}_48.png`,
+            '128': `icons/icon_${mode}_128.png`,
+        },
     },
     icons: {
         '16': `icons/icon_${mode}_16.png`,

src/pages/content/index.tsx

@@ -10,9 +10,8 @@ const support = getSiteSupport(window.location.href);
 
 const renderComponent = (Component: React.ComponentType) => {
     const container = document.createElement('div');
-    container.id = 'extension-root';
-    document.body.appendChild(container);
 
+    // all components are portaled away, not actually rendered to screen
     createRoot(container).render(
         <React.StrictMode>
             <Component />

unocss.config.ts

@@ -1,4 +1,4 @@
-import presetUno from '@unocss/preset-uno';
+import presetWind4 from '@unocss/preset-wind4';
 import presetWebFonts from '@unocss/preset-web-fonts';
 import transformerDirectives from '@unocss/transformer-directives';
 import transformerVariantGroup from '@unocss/transformer-variant-group';
@@ -50,7 +50,8 @@ export default defineConfig({
         },
     ],
     presets: [
-        presetUno(),
+        presetWind4(),
+        // todo: for some reason, breaking eslint ._.
         presetWebFonts({
             provider: 'none',
             fonts: {

vite.config.ts

@@ -207,6 +207,9 @@ export default defineConfig({
         hmr: {
             clientPort: 5173,
         },
+        cors: {
+            origin: [/chrome-extension:\/\//],
+        },
         proxy: {
             '/debug.html': {
                 target: 'http://localhost:5173',
@@ -256,16 +259,16 @@ export default defineConfig({
             },
         },
     },
-    test: {
-        coverage: {
-            provider: 'v8',
-        },
-    },
-    css: {
-        preprocessorOptions: {
-            scss: {
-                api: 'modern-compiler',
-            },
-        },
-    },
+    // test: {
+    // 	coverage: {
+    // 		provider: "v8",
+    // 	},
+    // },
+    // css: {
+    // 	preprocessorOptions: {
+    // 		scss: {
+    // 			api: "modern-compiler",
+    // 		},
+    // 	},
+    // },
 });