wxt 0.3.0 → 0.3.2

package/dist/index.cjs

@@ -55,6 +55,8 @@ function normalizePath2(path5) {
 function unnormalizePath(path5) {
   return import_node_path.default.normalize(path5);
 }
+var CSS_EXTENSIONS = ["css", "scss", "sass", "less", "styl", "stylus"];
+var CSS_EXTENSIONS_PATTERN = `+(${CSS_EXTENSIONS.join("|")})`;
 
 // src/core/utils/entrypoints.ts
 function getEntrypointName(entrypointsDir, inputPath) {
@@ -274,7 +276,7 @@ function getUnimportOptions(config) {
     imports: [{ name: "defineConfig", from: "wxt" }],
     presets: [{ package: "wxt/client" }, { package: "wxt/browser" }],
     warn: config.logger.warn,
-    dirs: ["./components/*", "./composables/*", "./hooks/*", "./utils/*"]
+    dirs: ["components", "composables", "hooks", "utils"]
   };
   return (0, import_vite.mergeConfig)(
     defaultOptions,
@@ -368,6 +370,30 @@ export default defineBackground(() => void 0)`;
 }
 var VIRTUAL_NOOP_BACKGROUND_MODULE_ID = "virtual:user-background";
 
+// src/core/vite-plugins/cssEntrypoints.ts
+function cssEntrypoints(entrypoint, config) {
+  return {
+    name: "wxt:css-entrypoint",
+    config() {
+      return {
+        build: {
+          rollupOptions: {
+            output: {
+              assetFileNames: () => getEntrypointBundlePath(entrypoint, config.outDir, ".css")
+            }
+          }
+        }
+      };
+    },
+    generateBundle(_, bundle) {
+      Object.keys(bundle).forEach((file) => {
+        if (file.endsWith(".js"))
+          delete bundle[file];
+      });
+    }
+  };
+}
+
 // src/core/utils/createFsCache.ts
 var import_fs_extra3 = __toESM(require("fs-extra"), 1);
 var import_path4 = require("path");
@@ -702,7 +728,12 @@ async function buildEntrypoints(groups, config) {
 async function buildSingleEntrypoint(entrypoint, config) {
   const isVirtual = ["background", "content-script"].includes(entrypoint.type);
   const entry = isVirtual ? `virtual:wxt-${entrypoint.type}?${entrypoint.inputPath}` : entrypoint.inputPath;
+  const plugins = [];
+  if (entrypoint.type === "content-script-style" || entrypoint.type === "unlisted-style") {
+    plugins.push(cssEntrypoints(entrypoint, config));
+  }
   const libMode = {
+    plugins,
     build: {
       lib: {
         entry,
@@ -798,7 +829,7 @@ async function copyPublicDirectory(config) {
 // src/core/build/findEntrypoints.ts
 var import_path8 = require("path");
 var import_fs_extra8 = __toESM(require("fs-extra"), 1);
-var import_picomatch = __toESM(require("picomatch"), 1);
+var import_minimatch = require("minimatch");
 var import_linkedom2 = require("linkedom");
 var import_json5 = __toESM(require("json5"), 1);
 
@@ -873,7 +904,7 @@ async function findEntrypoints(config) {
     relativePaths.map(async (relativePath) => {
       const path5 = (0, import_path8.resolve)(config.entrypointsDir, relativePath);
       const matchingGlob = pathGlobs.find(
-        (glob3) => import_picomatch.default.isMatch(relativePath, glob3)
+        (glob3) => (0, import_minimatch.minimatch)(relativePath, glob3)
       );
       if (matchingGlob == null) {
         return config.logger.warn(
@@ -907,6 +938,14 @@ ${JSON.stringify(
             path5
           );
           break;
+        case "content-script-style":
+          entrypoint = {
+            type,
+            name: getEntrypointName(config.entrypointsDir, path5),
+            inputPath: path5,
+            outputDir: (0, import_path8.resolve)(config.outDir, CONTENT_SCRIPT_OUT_DIR)
+          };
+          break;
         default:
           entrypoint = {
             type,
@@ -1022,7 +1061,7 @@ async function getContentScriptEntrypoint(config, name, path5) {
     type: "content-script",
     name: getEntrypointName(config.entrypointsDir, path5),
     inputPath: path5,
-    outputDir: (0, import_path8.resolve)(config.outDir, "content-scripts"),
+    outputDir: (0, import_path8.resolve)(config.outDir, CONTENT_SCRIPT_OUT_DIR),
     options
   };
 }
@@ -1049,6 +1088,10 @@ var PATH_GLOB_TO_TYPE_MAP = {
   "content/index.ts?(x)": "content-script",
   "*.content.ts?(x)": "content-script",
   "*.content/index.ts?(x)": "content-script",
+  [`content.${CSS_EXTENSIONS_PATTERN}`]: "content-script-style",
+  [`*.content.${CSS_EXTENSIONS_PATTERN}`]: "content-script-style",
+  [`content/index.${CSS_EXTENSIONS_PATTERN}`]: "content-script-style",
+  [`*.content/index.${CSS_EXTENSIONS_PATTERN}`]: "content-script-style",
   "popup.html": "popup",
   "popup/index.html": "popup",
   "options.html": "options",
@@ -1056,9 +1099,13 @@ var PATH_GLOB_TO_TYPE_MAP = {
   "*.html": "unlisted-page",
   "*/index.html": "unlisted-page",
   "*.ts": "unlisted-script",
+  "*/index.ts": "unlisted-script",
+  [`*.${CSS_EXTENSIONS_PATTERN}`]: "unlisted-style",
+  [`*/index.${CSS_EXTENSIONS_PATTERN}`]: "unlisted-style",
   // Don't warn about any files in subdirectories, like CSS or JS entrypoints for HTML files
   "*/*": "ignored"
 };
+var CONTENT_SCRIPT_OUT_DIR = "content-scripts";
 
 // src/core/build/generateTypesDir.ts
 var import_unimport3 = require("unimport");
@@ -1302,7 +1349,8 @@ async function generateMainfest(entrypoints, buildOutput, config) {
       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
+      short_name: pkg?.shortName,
+      icons: discoverIcons(buildOutput)
     },
     config.manifest
   );
@@ -1313,11 +1361,11 @@ async function generateMainfest(entrypoints, buildOutput, config) {
     addDevModePermissions(manifest, config);
   if (manifest.name == null)
     throw Error(
-      "Manifest 'name' is missing. Either:\n1. Set the name in your <root>/package.json\n2. Set a name via the manifest option in your wxt.config.ts"
+      "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) {
     throw Error(
-      "Manifest 'version' is missing. Either:\n1. Add a version in your <root>/package.json\n2. Pass the version via the manifest option in your wxt.config.ts"
+      "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 manifest;
@@ -1506,6 +1554,39 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
     }
   }
 }
+function discoverIcons(buildOutput) {
+  const icons = [];
+  const iconRegex = [
+    /^icon-([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    // icon-16.png
+    /^icon-([0-9]+)x[0-9]+\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    // icon-16x16.png
+    /^icon@([0-9]+)w\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    // icon@16w.png
+    /^icon@([0-9]+)h\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    // icon@16h.png
+    /^icon@([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    // icon@16.png
+    /^icon[\/\\]([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    // icon/16.png
+    /^icon[\/\\]([0-9]+)x[0-9]+\.(png|bmp|jpeg|jpg|ico|gif)$/
+    // icon/16x16.png
+  ];
+  buildOutput.publicAssets.forEach((asset) => {
+    let size;
+    for (const regex of iconRegex) {
+      const match = asset.fileName.match(regex);
+      if (match?.[1] != null) {
+        size = match[1];
+        break;
+      }
+    }
+    if (size == null)
+      return;
+    icons.push([size, normalizePath2(asset.fileName)]);
+  });
+  return icons.length > 0 ? Object.fromEntries(icons) : void 0;
+}
 function addDevModeCsp(manifest, config) {
   const permission = `http://${config.server?.hostname ?? ""}/*`;
   const allowedCsp = config.server?.origin ?? "http://localhost:*";
@@ -1598,7 +1679,9 @@ var ENTRY_TYPE_TO_GROUP_MAP = {
   "unlisted-page": "extension-page",
   background: "no-group",
   "content-script": "no-group",
-  "unlisted-script": "no-group"
+  "unlisted-script": "no-group",
+  "unlisted-style": "no-group",
+  "content-script-style": "no-group"
 };
 
 // src/core/utils/formatDuration.ts
@@ -1622,7 +1705,7 @@ var import_fs_extra12 = __toESM(require("fs-extra"), 1);
 var import_filesize = require("filesize");
 
 // src/core/log/printTable.ts
-function printTable(log, rows, gap = 2) {
+function printTable(log, header, rows, gap = 2) {
   if (rows.length === 0)
     return;
   const columnWidths = rows.reduce(
@@ -1644,11 +1727,12 @@ function printTable(log, rows, gap = 2) {
     if (i !== rows.length - 1)
       str += "\n";
   });
-  log(str);
+  log(`${header}
+${str}`);
 }
 
 // src/core/log/printFileList.ts
-async function printFileList(log, baseDir, files) {
+async function printFileList(log, header, baseDir, files) {
   let totalSize = 0;
   const fileRows = await Promise.all(
     files.map(async (file, i) => {
@@ -1667,8 +1751,8 @@ async function printFileList(log, baseDir, files) {
       ];
     })
   );
-  printTable(log, fileRows);
-  log(`${import_picocolors.default.cyan("\u03A3 Total size:")} ${String((0, import_filesize.filesize)(totalSize))}`);
+  fileRows.push([`${import_picocolors.default.cyan("\u03A3 Total size:")} ${String((0, import_filesize.filesize)(totalSize))}`]);
+  printTable(log, header, fileRows);
 }
 var DEFAULT_COLOR = import_picocolors.default.blue;
 var CHUNK_COLORS = {
@@ -1683,7 +1767,7 @@ function getChunkColor(filename) {
 }
 
 // src/core/log/printBuildSummary.ts
-async function printBuildSummary(output, config) {
+async function printBuildSummary(log, header, output, config) {
   const chunks = [
     ...output.steps.flatMap((step) => step.chunks),
     ...output.publicAssets
@@ -1696,7 +1780,7 @@ async function printBuildSummary(output, config) {
     return l.fileName.localeCompare(r.fileName);
   });
   const files = chunks.map((chunk) => (0, import_path11.resolve)(config.outDir, chunk.fileName));
-  await printFileList(config.logger.log, config.outDir, files);
+  await printFileList(log, header, config.outDir, files);
 }
 var DEFAULT_SORT_WEIGHT = 100;
 var CHUNK_SORT_WEIGHTS = {
@@ -1727,10 +1811,12 @@ async function buildInternal(config) {
   const entrypoints = await findEntrypoints(config);
   const groups = groupEntrypoints(entrypoints);
   const { output } = await rebuild(config, groups, void 0);
-  config.logger.success(
-    `Built extension in ${formatDuration(Date.now() - startTime)}`
+  await printBuildSummary(
+    config.logger.success,
+    `Built extension in ${formatDuration(Date.now() - startTime)}`,
+    output,
+    config
   );
-  await printBuildSummary(output, config);
   return output;
 }
 async function rebuild(config, entrypointGroups, existingOutput = {
@@ -1918,7 +2004,7 @@ function reloadHtmlPages(groups, server, config) {
 }
 
 // package.json
-var version2 = "0.3.0";
+var version2 = "0.3.2";
 
 // src/core/utils/defineConfig.ts
 function defineConfig(config) {