Easy workaround to put component classes to childs (without global)

dm-de commented 2 years ago

Describe the problem

Sometimes, we need to use :global() styles to modify child components Otherwise, it would not work.

<div>
    <Icon class="extra" />
</div>

<style>
:global(.extra) {
    color: red;
}
</style>

Describe the proposed solution

MAGIC value $HASH $HASH is replaced with the value (for example: svelte-urs9w7) of component hash

The code could look so:

<div>
    <Icon class="{$HASH} extra" />
</div>

<style>
.extra {
    color: red;
}
</style>

finally - Icon class turn to: class="svelte-urs9w7 extra"

Alternatives considered

Alternative: do it automatic

Add $HASH to any child component, that use class, defined in style-block

Importance

i cannot use svelte without it

ToP29 commented 1 year ago

This would be really great addition! One last thing missing from perfect framework/compiler 😁 As long term svelte user/addict, I delt with this issue many times. Simple workaround is to created parent div for this component and style that, but it does not work in all cases and i kinda hate growing html tree. So I also usually pick making the class global, which in my opinion is unnecessary chore and could be improved.

christophsanz commented 3 weeks ago

In my opinion this should be in 5.0, not 5.x - and automatic.

Alternative: do it automatic Add $HASH to any child component, that use class, defined in style-block

I'd say this also makes the components more aligned with normal html tags in svelte, which is always good imo.

5.0 is the chance to add this breaking change and do it automatically, please consider it moving it back to 5.0, thx :)

sveltejs / svelte