CSS files get converted to Javascript files

[ttoino]

Summary

CSS files included in additionalInputs are converted to empty javascript files when built, in addition to a style.css file in the root folder.

As an example, if you have the file src/test.css, it gets converted to dist/src/test.js and dist/style.css (this exhibits the same issue as described in this comment).

While importing the css file from javascript is a workaround for this issue, it does not cover all use cases, specifically, I'd like to link to a css file dinamically depending on user preferences and right now that's impossible.

Reproduction

test-extension.zip

Environment

  System:
    OS: Linux 6.4 EndeavourOS
    CPU: (8) x64 AMD Ryzen 7 4700U with Radeon Graphics
    Memory: 1.03 GB / 7.14 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 18.0.0 - /run/user/1000/fnm_multishells/373494_1689622416192/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.6.0 - /run/user/1000/fnm_multishells/373494_1689622416192/bin/npm
  Browsers:
    Chromium: 115.0.5790.90
  npmPackages:
    vite: ^4.4.4 => 4.4.4 
    vite-plugin-web-extension: ^3.1.2 => 3.1.2 

[sickl8]

@ttoino This issue really annoyed me since I transitioned from CRXJS to this since the former did the copying of files for me automatically including the images, I resorted to just copy the folder structure where I put my static files to the public folder. My src folder with the static assets:

src
L assets
   L fonts
   | L font.ttf
   L css
   | L index.css
   | L normalize.css
   L icons
     L logo.png
     L logo_16.png
     L logo.svg

My public folder:

public
L src
  L assets
     ...

vite will copy them to the src folder in the outdir (usually dist)