Passed down class contains no css-rules and is recognized by compiler as unused, "Unused CSS selector" warning in console

[evgenii-minkov]

Describe the bug

When composing svelte components, a class passed from parent-component to child-component as a prop is

• successfully passed as a prop
• contains no css-rules
• recognized as unused by compiler

Reproduction

basic, no-code reproduction

• open https://svelte.dev/repl/1d0b80898137445da24cf565830ce3f7?version=3.49.0 in Chromium based browser

manual reproduction

1. follow the "getting started" guide at https://kit.svelte.dev/docs/introduction
2. write 2 svelte-components

/** child-component, child.svelte */
<script>
	let className;
	export { className as class };
</script>

<div class={ className }>some content</div>

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

/** parent-component, parent.svelte */
<script>
	import Child from "./child.svelte";
</script>

<style>
    .bg-red { background-color: red; }
    .bg-blue { background-color: blue; }
</style>

<div>
    <Child class="bg-red"/>
    <Child class="bg-blue"/>
</div>

3. Use these components on some page

/** routes/index.svelte */
<script>
    import Parent from "../components/parent.svelte";
</script>

<Parent/>

4. Notice that

• neither passed class is applied
• both passed classes are present in DOM
• both passed classes lack css-rules
• your IDE warns you about classes "bg-red", "bg-blue" being unused

Logs

No response

System Info

System:
    OS: macOS 12.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 514.44 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
Binaries:
    Node: 18.4.0 - ~/.nvm/versions/node/v18.4.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.4.0/bin/yarn
    npm: 8.12.1 - ~/.nvm/versions/node/v18.4.0/bin/npm
Browsers:
    Chrome: 104.0.5112.79
    Safari: 15.6
npmPackages:
    svelte: ^3.49.0 => 3.49.0

Severity

blocking all usage of svelte

[evgenii-minkov]

And an additional note:

i tried wrapping a child component in a div as a workaround, and then styling the child through the wrapper-div, like this

<script>
    import Child from "./child.svelte";
</script>

<style>
    .wrapper > div { 
       background-color: red;
    }
</style>

<div class="wrapper"><Child/></div>

and it didn't work - environment's behavior is the same :-(

[baseballyama]

You cannot specify a class to Svelte component.
See documentation for style scopes.

https://svelte.dev/docs#component-format-style

Also, maybe CSS variables helps you.
https://svelte.dev/docs#template-syntax-component-directives---style-props

[evgenii-minkov]

hello, sir

ty for responding so quickly

i'll look deeper into theses materials you linked

however, i'm very confused - this example i linked in the "Reproduction" section describes exactly the behavior i wanted to implement:

• style described in a parent component
• className defined as a prop in a child component
• class passed to a child through parent
  and it doesn't work in the docs' REPL either

so, i don't know what conclusions to make? is the example outdated? has it always been wrong? or maybe i misunderstood it and "Passing down classes to component" in example's title means smth else entirely?

[evgenii-minkov]

oh, i think i figured it out

the example from REPL is NOT an official svelte-team example

it's a random hosted code that Google finds for a "svelte pass class to component" search query

again, ty for your time

[evgenii-minkov]

for anyone stumbling on this issue

one possible way to implement styling of a child component in svelte is this

aka

/** parent.svelte */
<script>import Child from "..."</script>

<style>
    .parent > :global(.child) {
        ... your styles
    }
</style>

<div class="parent">
    <Child class="child"/>
</div>