wxt 0.6.6 → 0.7.1-alpha1

package/dist/index.cjs

@@ -1358,13 +1358,15 @@ function getEntrypointGlobals(config, entrypointName) {
 // src/core/utils/getInternalConfig.ts
 async function getInternalConfig(inlineConfig, command) {
   let userConfig = {};
+  let userConfigMetadata;
   if (inlineConfig.configFile !== false) {
-    const loaded = await (0, import_c12.loadConfig)({
+    const { config: loadedConfig, ...metadata } = await (0, import_c12.loadConfig)({
       name: "wxt",
       cwd: inlineConfig.root ?? process.cwd(),
       rcFile: false
     });
-    userConfig = loaded.config ?? {};
+    userConfig = loadedConfig ?? {};
+    userConfigMetadata = metadata;
   }
   const mergedConfig = mergeInlineConfig(inlineConfig, userConfig);
   const debug = mergedConfig.debug ?? false;
@@ -1426,7 +1428,8 @@ async function getInternalConfig(inlineConfig, command) {
     analysis: {
       enabled: mergedConfig.analysis?.enabled ?? false,
       template: mergedConfig.analysis?.template ?? "treemap"
-    }
+    },
+    userConfigMetadata: userConfigMetadata ?? {}
   };
   finalConfig.vite = (env2) => resolveInternalViteConfig(env2, mergedConfig, finalConfig);
   return finalConfig;
@@ -1712,10 +1715,15 @@ async function buildSingleEntrypoint(entrypoint, config) {
             config.outDir,
             ".js"
           ),
-          // Output content script CSS to assets/ with a hash to prevent conflicts. Defaults to
-          // "[name].[ext]" in lib mode, which usually results in "style.css". That means multiple
-          // content scripts with styles would overwrite each other if it weren't changed below.
-          assetFileNames: `assets/${entrypoint.name}.[ext]`
+          // Output content script CSS to `content-scripts/`, but all other scripts are written to
+          // `assets/`.
+          assetFileNames: ({ name }) => {
+            if (entrypoint.type === "content-script" && name?.endsWith("css")) {
+              return `content-scripts/${entrypoint.name}.[ext]`;
+            } else {
+              return `assets/${entrypoint.name}.[ext]`;
+            }
+          }
         }
       }
     },
@@ -2342,14 +2350,14 @@ async function writeTsConfigFile(mainReference, config) {
     "lib": ["DOM", "WebWorker"],
     "skipLibCheck": true,
     "paths": {
-      "@@": ["${rootPath}"],
-      "@@/*": ["${rootPath}/*"],
-      "~~": ["${rootPath}"],
-      "~~/*": ["${rootPath}/*"],
       "@": ["${srcPath}"],
       "@/*": ["${srcPath}/*"],
       "~": ["${srcPath}"],
-      "~/*": ["${srcPath}/*"]
+      "~/*": ["${srcPath}/*"],
+      "@@": ["${rootPath}"],
+      "@@/*": ["${rootPath}/*"],
+      "~~": ["${rootPath}"],
+      "~~/*": ["${rootPath}/*"]
     }
   },
   "include": [
@@ -2463,6 +2471,7 @@ async function getPackageJson(config) {
 
 // src/core/utils/manifest.ts
 var import_immer = require("immer");
+var vite4 = __toESM(require("vite"), 1);
 async function writeManifest(manifest, output, config) {
   const str = config.mode === "production" ? JSON.stringify(manifest) : JSON.stringify(manifest, null, 2);
   await import_fs_extra12.default.ensureDir(config.outDir);
@@ -2477,34 +2486,37 @@ async function writeManifest(manifest, output, config) {
 }
 async function generateMainfest(entrypoints, buildOutput, config) {
   const pkg = await getPackageJson(config);
-  const manifest = Object.assign(
-    {
-      manifest_version: config.manifestVersion,
-      name: pkg?.name,
-      description: pkg?.description,
-      version: pkg?.version && simplifyVersion(pkg.version),
-      // Only add the version name to chromium and if the user hasn't specified a custom version.
-      version_name: config.browser !== "firefox" && !config.manifest.version ? pkg?.version : void 0,
-      short_name: pkg?.shortName,
-      icons: discoverIcons(buildOutput)
-    },
-    config.manifest
+  const baseManifest = {
+    manifest_version: config.manifestVersion,
+    name: pkg?.name,
+    description: pkg?.description,
+    version: pkg?.version && simplifyVersion(pkg.version),
+    // Only add the version name to chromium and if the user hasn't specified a custom version.
+    version_name: config.browser !== "firefox" && !config.manifest.version ? pkg?.version : void 0,
+    short_name: pkg?.shortName,
+    icons: discoverIcons(buildOutput)
+  };
+  const userManifest = config.manifest;
+  const manifest = vite4.mergeConfig(
+    baseManifest,
+    userManifest
   );
   addEntrypoints(manifest, entrypoints, buildOutput, config);
   if (config.command === "serve")
     addDevModeCsp(manifest, config);
   if (config.command === "serve")
     addDevModePermissions(manifest, config);
-  if (manifest.name == null)
+  const finalManifest = (0, import_immer.produce)(manifest, config.transformManifest);
+  if (finalManifest.name == null)
     throw Error(
       "Manifest 'name' is missing. Either:\n1. Set the name in your <rootDir>/package.json\n2. Set a name via the manifest option in your wxt.config.ts"
     );
-  if (manifest.version == null) {
+  if (finalManifest.version == null) {
     throw Error(
       "Manifest 'version' is missing. Either:\n1. Add a version in your <rootDir>/package.json\n2. Pass the version via the manifest option in your wxt.config.ts"
     );
   }
-  return (0, import_immer.produce)(manifest, config.transformManifest);
+  return finalManifest;
 }
 function simplifyVersion(versionName) {
   const version3 = /^((0|[1-9][0-9]{0,8})([.](0|[1-9][0-9]{0,8})){0,3}).*$/.exec(
@@ -2657,6 +2669,7 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
     }
   }
   if (contentScripts?.length) {
+    const cssMap = getContentScriptsCssMap(buildOutput, contentScripts);
     if (config.command === "serve" && config.manifestVersion === 3) {
       const hostPermissions = new Set(manifest.host_permissions ?? []);
       contentScripts.forEach((script) => {
@@ -2681,7 +2694,7 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
           ...mapWxtOptionsToContentScript(scripts[0].options),
           // TOOD: Sorting css and js arrays here so we get consistent test results... but we
           // shouldn't have to. Where is the inconsistency coming from?
-          css: getContentScriptCssFiles(scripts, buildOutput)?.sort(),
+          css: getContentScriptCssFiles(scripts, cssMap)?.sort(),
           js: scripts.map(
             (entry) => getEntrypointBundlePath(entry, config.outDir, ".js")
           ).sort()
@@ -2692,6 +2705,15 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
         manifest.content_scripts.push(...newContentScripts);
       }
     }
+    const contentScriptCssResources = getContentScriptCssWebAccessibleResources(
+      config,
+      contentScripts,
+      cssMap
+    );
+    if (contentScriptCssResources.length > 0) {
+      manifest.web_accessible_resources ??= [];
+      manifest.web_accessible_resources.push(...contentScriptCssResources);
+    }
   }
 }
 function discoverIcons(buildOutput) {
@@ -2756,20 +2778,52 @@ function addDevModePermissions(manifest, config) {
   if (config.manifestVersion === 3)
     addPermission(manifest, "scripting");
 }
-function getContentScriptCssFiles(contentScripts, buildOutput) {
+function getContentScriptCssFiles(contentScripts, contentScriptCssMap) {
   const css = [];
-  const allChunks = buildOutput.steps.flatMap((step) => step.chunks);
   contentScripts.forEach((script) => {
-    const relatedCss = allChunks.find(
-      (chunk) => chunk.fileName === `assets/${script.name}.css`
-    );
-    if (relatedCss)
-      css.push(relatedCss.fileName);
+    if (script.options.cssInjectionMode === "manual" || script.options.cssInjectionMode === "ui")
+      return;
+    const cssFile = contentScriptCssMap[script.name];
+    if (cssFile == null)
+      return;
+    if (cssFile)
+      css.push(cssFile);
   });
   if (css.length > 0)
     return css;
   return void 0;
 }
+function getContentScriptCssWebAccessibleResources(config, contentScripts, contentScriptCssMap) {
+  const resources = [];
+  contentScripts.forEach((script) => {
+    if (script.options.cssInjectionMode !== "ui")
+      return;
+    const cssFile = contentScriptCssMap[script.name];
+    if (cssFile == null)
+      return;
+    if (config.manifestVersion === 2) {
+      resources.push(cssFile);
+    } else {
+      resources.push({
+        resources: [cssFile],
+        matches: script.options.matches
+      });
+    }
+  });
+  return resources;
+}
+function getContentScriptsCssMap(buildOutput, scripts) {
+  const map = {};
+  const allChunks = buildOutput.steps.flatMap((step) => step.chunks);
+  scripts.forEach((script) => {
+    const relatedCss = allChunks.find(
+      (chunk) => chunk.fileName === `content-scripts/${script.name}.css`
+    );
+    if (relatedCss != null)
+      map[script.name] = relatedCss.fileName;
+  });
+  return map;
+}
 function addPermission(manifest, permission) {
   manifest.permissions ??= [];
   if (manifest.permissions.includes(permission))
@@ -2785,7 +2839,7 @@ function addHostPermission(manifest, hostPermission) {
 
 // src/core/build.ts
 var import_picocolors3 = __toESM(require("picocolors"), 1);
-var vite4 = __toESM(require("vite"), 1);
+var vite5 = __toESM(require("vite"), 1);
 var import_fs_extra14 = __toESM(require("fs-extra"), 1);
 
 // src/core/utils/groupEntrypoints.ts
@@ -4089,7 +4143,7 @@ async function buildInternal(config) {
   const target = `${config.browser}-mv${config.manifestVersion}`;
   config.logger.info(
     `${verb} ${import_picocolors3.default.cyan(target)} for ${import_picocolors3.default.cyan(config.mode)} with ${import_picocolors3.default.green(
-      `Vite ${vite4.version}`
+      `Vite ${vite5.version}`
     )}`
   );
   const startTime = Date.now();
@@ -4167,7 +4221,7 @@ async function combineAnalysisStats(config) {
 }
 
 // src/core/server.ts
-var vite5 = __toESM(require("vite"), 1);
+var vite6 = __toESM(require("vite"), 1);
 
 // src/core/runners/wsl.ts
 var import_node_path10 = require("path");
@@ -4312,8 +4366,8 @@ async function getServerInfo() {
 }
 async function setupServer(serverInfo, config) {
   const runner = await createExtensionRunner(config);
-  const viteServer = await vite5.createServer(
-    vite5.mergeConfig(serverInfo, await config.vite(config.env))
+  const viteServer = await vite6.createServer(
+    vite6.mergeConfig(serverInfo, await config.vite(config.env))
   );
   const start = async () => {
     await viteServer.listen(server.port);
@@ -4358,10 +4412,15 @@ function reloadContentScripts(steps, config, server) {
       if (Array.isArray(entry) || entry.type !== "content-script")
         return;
       const js = [getEntrypointBundlePath(entry, config.outDir, ".js")];
-      const css = getContentScriptCssFiles([entry], server.currentOutput);
-      const { include: _1, exclude: _2, ...options } = entry.options;
+      const cssMap = getContentScriptsCssMap(server.currentOutput, [entry]);
+      const css = getContentScriptCssFiles([entry], cssMap);
       server.reloadContentScript({
-        ...options,
+        allFrames: entry.options.allFrames,
+        excludeMatches: entry.options.excludeMatches,
+        matches: entry.options.matches,
+        runAt: entry.options.runAt,
+        // @ts-expect-error: Chrome accepts this, not typed in webextension-polyfill (https://developer.chrome.com/docs/extensions/reference/scripting/#type-RegisteredContentScript)
+        world: entry.options.world,
         js,
         css
       });
@@ -4413,7 +4472,7 @@ async function clean(root = process.cwd()) {
 }
 
 // package.json
-var version2 = "0.6.6";
+var version2 = "0.7.1-alpha1";
 
 // src/core/utils/defineConfig.ts
 function defineConfig(config) {