Unused CSS selectors missing comas in scoped styles

HighPriest commented 3 days ago

Describe the bug

CSS style inside a +layout.svelte (or any .svelte file)

h1, h2, h3, h4, p {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
}

gets compiled into

/* (unused) h1*/ h2.s-ISUD83oxX-r6, h3.s-ISUD83oxX-r6 /* (unused) h4*/ p.s-ISUD83oxX-r6 {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
}

Take note of how the h4 tags appearance. A coma is missing between h3 & p.
This makes the h3 & p selector not apply correctly.

Reproduction

Dependencies:

"@sveltejs/kit": "npm:@sveltejs/kit@2.7.2",
"svelte": "npm:svelte@5.1.1",
"sveltekit-adapter-deno": "npm:sveltekit-adapter-deno@0.16.0",
"sass-embedded": "npm:sass-embedded@1.80.4",

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD      
  Browsers:
    Internet Explorer: 11.0.19041.4355

Severity

serious, but I can work around it

Additional Information

I have haphazardly reported this issue to Sass people https://github.com/sass/embedded-host-node/issues/343

eltigerchino commented 2 days ago

Please provide a minimal reproduction in the form of a repository

adiguba commented 2 days ago

Here a REPL : https://svelte.dev/playground/untitled?version=5.1.3#H4sIAAAAAAAACm2NzQrCMAzHX6XkPBxrPZVS8CE8OQ9zi3RQs7JGcYy9u6nzaEJIfv98rUDdA8HCmXjkiANUcB8jZrCXFXhJpVcE0X-Tp5QO-YWRi3brMv7T-4kYieUMtORC40PjakkFtA9aQH_B-GAETIHkk6uTVLu7zEtEwdBUKmgJI3GsVFJrS0qsn-I0WzXj0NImC_W-If8Z3wyW5ydu1-0D3NE81uUAAAA=

<h1> and <h2> are red, <h3> and <p> are still black because the CSS is broken

sveltejs / svelte