svelte: scoped style doesn't work if compile component with css option 'none'

Describe the bug

As #7914 said:

When hydrating SSR components, the styles are commonly already generated and there is no need to generate it again for the client side bundle.

However, {css:"none"} does not work well with scoped styles.

Reproduction

Currently, the REPL doesn’t support none (and I created a PR to support it https://github.com/sveltejs/sites/pull/460).

Let’s just consider the following code snippet:

<div> red </div>
<style> div { color: red } </style>

We can compile this code using {generate: "dom", css: "external"} to obtain two output that are used for CSR:

/* output.css */
div.svelte-d8zsiy{color:red }

/* output.csr.html */
<div class="svelte-d8zsiy">red</div>

And then we re-compile this code using {generate: "ssr", css: "none"}, there will be no CSS or scoped class name generated. As a result, the output.css file will not be applied to the SSR HTML:

# output.ssr.html
<div>red </div>

With {css: "none"}, the style is completely ignored, which means that Svelte cannot calculate the hash for the scoped class name.

---

A simple solution to this problem is to use {generate: "ssr", css: "external"} to generate the HTML for SSR. But, as you can see in the REPL, all CSS are contained in the JS output, resulting in a larger bundle size. Although bundle size for SSR might not be a problem in many cases, it could be beneficial to remove these unused CSS in JS output. (TBH, in my case, I run svelte inside the service worker, which means bundle size is critical.)

I propose that we reopen #2360 as it provides a simple and effective solution to remove CSS from the JS output.

Logs

No response

System Info

svelte 3.58.0

Severity

annoyance