Skip to content

scoped style doesn't work if compile component with css option 'none' #8465

Closed
@dhcmrlchtdj

Description

@dhcmrlchtdj

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 sveltejs/sites#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

Metadata

Metadata

Assignees

No one assigned

    Labels

    awaiting submitterneeds a reproduction, or clarification

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions