Multiple CSS files have the same name when using the Vite plugin with a scoped package

Describe the bug

If the package name includes a scope e.g @vanilla-extract/example the outputted CSS files will all have the names example.vanilla.css, example.vanilla2.css, example.vanilla3.css etc. This seems to be because the sanitise file scope function adds the package name and when a scope is used it includes a / so it considers the last part as the file name. I would expect the file name to be included in the asset name, which it is when not using a scope.

Link to reproduction

https://stackblitz.com/edit/vitejs-vite-gfnuxw?file=vite.config.ts

• Run npm run build in the above and it outputs:

  vite v2.8.4 building for production...
  ✓ 9 modules transformed.
  dist/main.js                0.25 KiB / gzip: 0.20 KiB
  dist/main.css.js            0.18 KiB / gzip: 0.16 KiB
  dist/Button.js              0.13 KiB / gzip: 0.13 KiB
  dist/Heading.js             0.14 KiB / gzip: 0.14 KiB
  dist/Button.css.js          0.18 KiB / gzip: 0.16 KiB
  dist/Heading.css.js         0.18 KiB / gzip: 0.16 KiB
  dist/example.vanilla.css    0.23 KiB / gzip: 0.16 KiB
  dist/example.vanilla2.css   0.12 KiB / gzip: 0.13 KiB
  dist/example.vanilla3.css   0.04 KiB / gzip: 0.06 KiB
  

• However, if you remove the scope from package.json->name. It outputs the following:

  dist/main.js                                0.25 KiB / gzip: 0.20 KiB
  dist/main.css.js                            0.19 KiB / gzip: 0.15 KiB
  dist/Button.js                              0.13 KiB / gzip: 0.13 KiB
  dist/Heading.js                             0.14 KiB / gzip: 0.14 KiB
  dist/Button.css.js                          0.20 KiB / gzip: 0.16 KiB
  dist/Heading.css.js                         0.20 KiB / gzip: 0.16 KiB
  dist/Button.css.ts___example.vanilla.css    0.23 KiB / gzip: 0.17 KiB
  dist/main.css.ts___example.vanilla.css      0.12 KiB / gzip: 0.13 KiB
  dist/Heading.css.ts___example.vanilla.css   0.04 KiB / gzip: 0.06 KiB
  

System Info

Output of npx envinfo --system --npmPackages @vanilla-extract/css,@vanilla-extract/webpack-plugin,@vanilla-extract/esbuild-plugin,@vanilla-extract/vite-plugin,@vanilla-extract/sprinkles,webpack,esbuild,vite --binaries --browsers:

  System:
    OS: macOS 11.2.3
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 35.36 MB / 16.00 GB
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 99.0.4844.83
    Edge: 99.0.1150.46
    Firefox: 94.0.1
    Safari: 14.0.3
  npmPackages:
    @vanilla-extract/esbuild-plugin: ^2.0.3 => 2.0.3 
    @vanilla-extract/vite-plugin: ^3.1.2 => 3.1.2 
    esbuild: 0.14.22 => 0.14.22 
    vite: 2.8.4 => 2.8.4

Related

• Some preliminary investigation was documented here: https://github.com/seek-oss/vanilla-extract/discussions/620#discussioncomment-2409014

[mattcompiles]

This issue, along with a few others have lead me to doing a decent refactor of file scopes across the board. Hoping this PR will make everyone happy. https://github.com/seek-oss/vanilla-extract/pull/647

[graup]

Referring back to @AndrewLeedham 's comment, how about something like this? (Untested poc: remove prefix and change serialization to filePath?package=packageName)

As far as I can tell the packageName is only there for the hot reload and injectStyles, right?