svelte
svelte copied to clipboard
Unused CSS selectors missing comas in scoped styles
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/[email protected]",
"svelte": "npm:[email protected]",
"sveltekit-adapter-deno": "npm:[email protected]",
"sass-embedded": "npm:[email protected]",
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
Please provide a minimal reproduction in the form of a repository
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