Conflicting CSS files for multiple content scripts

DeKleineKobini commented 1 year ago

Summary

Having any CSS file defined in the content script section results in an error that the entrypoint output could not be found.

Looking in the dist folder does show a style.css, even though I have no such file, that contains the correct css for 1 css file. If I have multiple css files all but one seems lost as well.

Reproduction

Have any CSS file defined in the content script section. If really needed, I can provide a very minimal GitHub repo.

Environment


  System:
    OS: Linux 6.3 Fedora Linux 38 (Workstation Edition)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 4.53 GB / 15.31 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.106
    Firefox: 114.0
  npmPackages:
    vite: ^4.3.9 => 4.3.9 
    vite-plugin-web-extension: ^3.0.1 => 3.0.9 ```

aklinker1 commented 1 year ago

Work around: import your CSS file into the JS entry point, then remove it from your manifest, and it will be included automatically in your dist/manifest.json.

// content-script.js
import "./path/to/style.css"

...

I'll work on fixing CSS entry points, it might have broken since v2.

As for the conflicts with style.css... That is new. I'll have to look into this. Is it as simple as having two CSS files in a content script?

DeKleineKobini commented 1 year ago

Didn't know that importing the css from the javascript would work that way. Tested it out with 3 different stylesheets for 2 pages and it now builds, but style.css is registered for both pages and only contains the style for 1 page. It combined the styles for both just fine, if that's meant to happen though.

example-extension.zip

aklinker1 commented 1 year ago

Thanks for the repro, I'll get it fixed when I have some free time

aklinker1 commented 1 year ago

@DeKleineKobini Ok, I've looked into this and have a solution. It will change the output directory structure, so I'm not going to include the fix until the next major release (no timeline for this, probably will happen after Vite's next major release).

In the meantime, you can use the following config to create separate CSS files for your content scripts:

    webExtension({
      manifest: generateManifest,
      disableAutoLaunch: true,
      scriptViteConfig: {
        build: {
          rollupOptions: {
            output: {
              assetFileNames: "[name]-[hash].[ext]",
            },
          },
        },
      },
    })

Tested with your reproduction, and everything is working 👍

Essentially, it will just add the cache-busting hash back to the end of the CSS filename. So if the contents are different, it will result in two different style-[hash].css files. I don't know if cache-busting is necessary, harmless, or harmful for extensions. The only thing I can think of is slowing down the store review process because the diff will be bigger. But since it's a CSS file... there shouldn't be any security concerns, and I wouldn't think it would need reviewed for anything.

aklinker1 / vite-plugin-web-extension