CSS class hashes do not go down the component tree

[PixelForm]

Describe the bug

I've seen this "bug" around for a while now and I have not seen a fix come up for it yet. Not even with Svelte 5. When writing CSS in svelte I really like doing it in Svelte's single file components. Until you struggle with mixing CSS with components. It is literally impossible. As you create a class name for a component it will get a hash injected by the svelte compiler. But this hash is not being applied to child components when you pass them as a prop. Obvious in a way but ridiculous because this is behavior you would expect from writing CSS in a framework at all. You pass some classes around and make them dynamic etc etc. This "bug" makes it frustrating to write CSS the Svelte way as people now just turn to Tailwind being the easier option as classes are global anyway. So in this case we are writing CSS again without hashes as they don't properly work in Svelte.

I really hope with Svelte 5 this will be fixed as writing component scoped CSS which can pass it's hashed class names down to children will be added to the upcoming release of Svelte 5 as it is a required feature for writing any CSS in svelte at all.

Expectation

<script>
    import Child from './Components/Child.svelte'
</script>

<div class="parent">
    <Child class="some-class" />
</div>

<style>
    .parent {
         background: yellow;
    }

    .some-class {
        color: red;
    }
</style>

Would render the CSS as:

.parent.svelte-xyz123 {
    background: yellow;
}

.some-class.svelte-xyz123 {
    color: red;
}

An the HTML as:

<div class="parent svelte-xyz123">
    <div class="some-class svelte-xyz123"></div/>
    <!-- Child.svelte -->
</div>
<!-- Parent.svelte -->

Reality

<script>
    import Child from './Components/Child.svelte'
</script>

<div class="parent">
    <Child class="some-class" />
</div>

<style>
    .parent {
         background: yellow;
    }

    .some-class {
        color: red;
    }
</style>

Would render the CSS as:

.parent.svelte-xyz123 {
    background: yellow;
}

And treats the child class as global class which is ofcourse not defined in the CSS:

<div class="parent svelte-xyz123">
    <div class="some-class"></div/>
    <!-- Child.svelte -->
</div>
<!-- Parent.svelte -->

Reproduction

Setup a Svelte 4 project and add a component which have some child components and pass a class name from the parent as props to the child component using svelte's built-in css method.

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 6.13 GB / 15.92 GB
Binaries:
    Node: 20.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.4.0 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
    Edge: Chromium (127.0.2651.86)
    Internet Explorer: 11.0.22621.3527
npmPackages:
    svelte: ^4.2.7 => 4.2.12

Severity

blocking all usage of svelte

[Conduitry]

There hasn't been a fix yet because it's not a bug. The class prop isn't treated any differently than any other prop. There are some ideas about how to achieve these sorts of things (like a way to access the current component's scoping class so you can pass it around), but it's not going to be in 5.0, and it's not going to be by making a prop called class work differently from every other prop.