Importing CSS as string shouldn't also inject it into HTML's head

Describe the bug

When importing a CSS as string, e.g.

import styles from "./styles.css";

the CSS is also extracted into a CSS file and injected into the HTML’s head. This means that the CSS is duplicated as both “pure CSS” and a JavaScript String. This cause bloats and could also cause conflicts if the strings are intended to be injected into shadow doms, isolated from each another (a .foo selector in one shadow dom can be a completely different .foo in another one, and of course of a .foo in the main page; those isolated stylesheets could also use element selectors: a, etc. as they’re intended to be isolated into a shadow dom). The JS String is also not minified, which contributes to the bloat.

I can’t see a reason why one would want both behaviors at the same time, and even then there would also be an easy workaround if one really wanted it:

import "./styles.css"; // inject the stylesheet into the HTML
import styles from "./styles.css"; // get the stylesheet's content as a JS string

(this is why I’m filing this as a bug report; feel free to reclassify as a request for enhancement)

Reproduction

See https://github.com/covidtrackerfr/vitemadose-front, deployed at https://vitemadose.covidtracker.fr The project imports the styles as string to inject them into web components’ shadow DOM.

The styles/global.scss here is duplicated both in the generated assets/index.*.css and as a JS string, but that’s expected as it’s imported both “for side-effects” (import "./styles/global.scss", to apply to the HTML page content) and “as string” (import globalCss from "../styles/global.scss", to be injected into web components’ shadow dom, as they’re isolated from the page). (this is bad as it leads to 222KB of duplicated content, but that’s another issue, unrelated to Vite; the JS string is not minified CSS though, with >11KB of line breaks, and I haven’t even looked at white space; this probably deserves a separate issue though).

All other stylesheets are only imported as strings, but they also end up in the assets/index.*.css file, unnecessarily. In this project, fortunately (or because they’ve been coded that way as a workaround), they don’t cause conflicts, only bloat.

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Linux 5.11 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 877.99 MB / 15.52 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 16.0.0 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 7.11.2 - /usr/bin/npm
  Browsers:
    Firefox: 88.0
  npmPackages:
    vite: 2.1.5 => 2.1.5 

Used package manager: npm

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[franktopel]

Please consider implementing this in a way that seems likely to be compatible with the upcoming CSS module scripts.

[patak-dev]

For reference, there were already some discussions about this in this PR https://github.com/vitejs/vite/pull/2148#issuecomment-784738508