When compiling `additionalInputs` only the css styles from the last in the `additionalInputs` array is included

Daandeve commented 2 years ago

Env

Node: 16.17.0 Yarn: 1.22.11 Vue: 3.2.40 Vite: 3.1.4 Vite-plugin-web-extension: 1.4.4

Issue

I have 3 seperate Vue app's/instances, arranged like this:

src/
  assets/
    ...
  auth/
    App.vue
    index.html
    main.ts
  injector/
    App.vue
    index.html
    main.ts
  main/
    App.vue
    index.html
    main.ts
  manifest.json
package.json
tsconfig.json
vite.config.ts

But not all css from the vue components are included, it seems like the only css that is included comes from the last in the additionalInputs array of the vite-plugin-web-extension

vite.config.ts

export default defineConfig({
  root: "src",
  resolve: {
    alias: {
      "@": join(__dirname, "src"),
      "@/injector": join(__dirname, "src/injector"),
      "@/auth": join(__dirname, "src/auth"),
      "@/main": join(__dirname, "src/main"),
    },
  },
  build: {
    outDir: resolve(__dirname, "dist"),
    emptyOutDir: true,
    sourcemap: !!process.env.SOURCEMAP,
    rollupOptions: {
      input: {
        auth: new URL("./src/auth/index.html", import.meta.url).pathname,
        main: new URL("./src/main/index.html", import.meta.url).pathname,
        injector: new URL("./src/injector/index.html", import.meta.url).pathname,
      },
      output: {
        sanitizeFileName,
      },
    },
  },
  plugins: [
    vue(),
    webExtension({
      manifest: "src/manifest.json",
      assets: "assets",
      additionalInputs: ["main/index.html", "injector/index.html"],
    }),
  ],
});

aklinker1 commented 2 years ago

Try removing the rollupOptions. The plugin will generate your rollup options for you.

Also, you don't include the sanatizeFileName function, so I'm not sure what you're trying to do there. That option shouldn't be necessary anyways.

Can you share the entire console output of vite build?

Daandeve commented 2 years ago

I removed the rollupOptions, with the same output. Build output:

$ vite build
vite v3.2.3 building for production...

[vite-plugin-web-extension] 
  Building HTML Pages in Multi-Page Mode:
    • src\auth\index.html
    • src\main\index.html
    • src\injector\index.html
  Building in Lib Mode:
    • src\background\background.ts
    • src\content-script.ts

[vite-plugin-web-extension] Building HTML Pages in Multi-Page Mode
✓ 50 modules transformed.
The emitted file "index.css" overwrites a previously emitted file of the same name.
The emitted file "index.css" overwrites a previously emitted file of the same name.
../dist/assets\css\add.scss                           0.79 KiB
../dist/assets\css\loader.scss                                 1.30 KiB
../dist/assets\css\main.scss                                   5.83 KiB
../dist/assets\css\generator.scss                     7.27 KiB
../dist/assets\css\settings.scss                               3.84 KiB
../dist/assets\css\styles.scss                                 3.57 KiB
../dist/assets\img\icons\logo_32x32.png                        1.23 KiB
../dist/assets\img\icons\logo_96x96.png                        3.41 KiB
../dist/assets\css\fontawesome\webfonts\fa-brands-400.eot      126.55 KiB
../dist/assets\css\fontawesome\webfonts\fa-brands-400.svg      678.21 KiB
../dist/assets\css\fontawesome\webfonts\fa-brands-400.ttf      126.25 KiB
../dist/assets\css\fontawesome\webfonts\fa-brands-400.woff     85.47 KiB
../dist/assets\css\fontawesome\webfonts\fa-brands-400.woff2    72.78 KiB
../dist/assets\css\fontawesome\webfonts\fa-regular-400.eot     33.59 KiB
../dist/assets\css\fontawesome\webfonts\fa-regular-400.svg     141.85 KiB
../dist/assets\css\fontawesome\webfonts\fa-regular-400.ttf     33.30 KiB
../dist/assets\css\fontawesome\webfonts\fa-regular-400.woff    16.41 KiB
../dist/assets\css\fontawesome\webfonts\fa-regular-400.woff2   13.27 KiB
../dist/assets\css\fontawesome\webfonts\fa-solid-900.eot       187.62 KiB
../dist/assets\css\fontawesome\webfonts\fa-solid-900.svg       824.26 KiB
../dist/assets\css\fontawesome\webfonts\fa-solid-900.ttf       187.34 KiB
../dist/assets\css\fontawesome\webfonts\fa-solid-900.woff      95.72 KiB
../dist/assets\css\fontawesome\webfonts\fa-solid-900.woff2     73.64 KiB
../dist/assets\js\popup\global\forms.js                        1.00 KiB
../dist/assets\js\popup\global\global.js                       9.66 KiB
../dist/assets\js\popup\home\clipboard.js                      0.98 KiB
../dist/assets\js\popup\home\main.js                           0.67 KiB
../dist/assets\js\popup\home\generator.js             3.42 KiB
../dist/assets\js\popup\home\settings.js                       1.83 KiB
../dist/assets\js\popup\loader\Loader.js                       0.76 KiB
../dist/assets\js\popup\login\popup.js                         2.11 KiB
../dist/assets\js\popup\router\Router.js                       2.60 KiB
../dist/assets\js\popup\router\routes.js                       0.50 KiB
../dist/manifest.json                                          1.02 KiB
../dist/auth/index.html                                        0.52 KiB
../dist/main/index.html                                        0.51 KiB
../dist/injector/index.html                                    0.46 KiB
../dist/assets\css\fontawesome\css\brands.css                  0.71 KiB / gzip: 0.31 KiB
../dist/assets\css\fontawesome\css\brands.min.css              0.65 KiB / gzip: 0.30 KiB
../dist/assets\css\fontawesome\css\regular.min.css             0.66 KiB / gzip: 0.30 KiB
../dist/assets\css\fontawesome\css\regular.css                 0.73 KiB / gzip: 0.32 KiB
../dist/assets\css\fontawesome\css\solid.css                   0.72 KiB / gzip: 0.32 KiB
../dist/assets\css\fontawesome\css\all.css                     72.77 KiB / gzip: 12.49 KiB
../dist/assets\css\fontawesome\css\solid.min.css               0.66 KiB / gzip: 0.30 KiB
../dist/assets\css\fontawesome\css\all.min.css                 55.20 KiB / gzip: 11.99 KiB
../dist/assets\css\fontawesome\css\svg-with-js.css             8.25 KiB / gzip: 1.63 KiB
../dist/assets\css\fontawesome\css\fontawesome.min.css         53.80 KiB / gzip: 11.71 KiB
../dist/assets\css\fontawesome\css\fontawesome.css             71.16 KiB / gzip: 12.21 KiB
../dist/assets\css\fontawesome\css\svg-with-js.min.css         6.21 KiB / gzip: 1.51 KiB
../dist/assets\css\fontawesome\css\v4-shims.css                42.37 KiB / gzip: 4.36 KiB
../dist/auth/index.js                                          1.95 KiB / gzip: 0.87 KiB
../dist/assets\css\fontawesome\css\v4-shims.min.css            26.01 KiB / gzip: 4.12 KiB
../dist/main/index.js                                          7.50 KiB / gzip: 1.78 KiB
../dist/injector/index.js                                      2.29 KiB / gzip: 1.04 KiB
../dist/logo_96x96.js                                          4.59 KiB / gzip: 3.51 KiB
../dist/index.css                                              11.34 KiB / gzip: 6.01 KiB
../dist/vuex.esm-bundler.js                                    62.70 KiB / gzip: 24.10 KiB

[vite-plugin-web-extension] Building src\background\background.ts in Lib Mode
vite v3.2.3 building for production...
✓ 5 modules transformed.
../dist/background/background.js   2.92 KiB / gzip: 1.29 KiB

[vite-plugin-web-extension] Building src\content-script.ts in Lib Mode
vite v3.2.3 building for production...
✓ 1 modules transformed.
../dist/content-script.js   6.37 KiB / gzip: 3.35 KiB

Done in 3.54s.

aklinker1 commented 2 years ago

OK, I see. Without the cache-breaking hashes, vite outputs multi-page builds to assets/{filename}.css

When using the plugin to build, it removes the hash and thus we get a name conflict.

https://github.com/aklinker1/vite-plugin-web-extension/blob/2517ce065d3264c93b0c9e5a5796f3c905796c4a/packages/vite-plugin-web-extension/index.ts#L585-L588

I have a working fix, though it's not backwards compatible. I'll include it in v2.

Essentially, the final vite config needs to include the following function for build.rollupOptions.output.assetFileNames:

import { defineConfig } from "vite";
import path from "node:path";

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // [name] is only the filename, so use the full path if possible
        assetFileNames: ({ name }) => {
          const nameNoExt =
            name?.replace(path.extname(name), "") ?? "[name]";
          return `${nameNoExt}.[ext]`;
        },
      },
    },
  },
});

V2 is NOT ready to be released, so don't expect this anytime soon. That means you have three options:

Use patch-package or a similar tool to apply this change

Add a custom plugin to override the build config (recommended)

import { defineConfig, PluginOption } from "vite";
import webExtension from "vite-plugin-web-extension";
import path from "node:path";

function fixAssetsOverwrite(): PluginOption {
 const trimExt = (name: string | undefined) =>
   name?.replace(path.extname(name), "");

 return {
   name: "fix-assets-overwrite",
   config(config) {
     const webExtensionOutput = config.build?.rollupOptions?.output;
     if (!webExtensionOutput || Array.isArray(webExtensionOutput)) return;

     webExtensionOutput.assetFileNames = ({ name }) =>
       `${trimExt(name) ?? "[name]"}.[ext]`;
     return config;
   },
 };
}

export default defineConfig({
 plugins: [
   webExtension({
     manifest: "src/manifest.json",
     assets: "src/assets",
     additionalInputs: ["src/two/index.html"],
   }),
   // This must go after vite-plugin-web-extension
   fixAssetsOverwrite(),
 ],
});

Don't name your entrypoints all index.html. You could use auth/auth.html, main/main.html, and injector/injector.html. A little verbose, but the simplest solution to get you going quickly.

aklinker1 commented 2 years ago

This has been fixed in v2

aklinker1 / vite-plugin-web-extension

When compiling `additionalInputs` only the css styles from the last in the `additionalInputs` array is included #47

Env

Issue