Provide classname utility for style encapsulation between parent/child component

[zheeeng]

Describe the problem

Sometimes style switching logic is placed in the parent component and controlled by switching the classNames. To avoid using the global CSS className, we need a utility to create a unique className and mark it as used.

Describe the proposed solution

There is a proposal API:

// Parent.svelte
<script>
import Child from './Child.svelte'
import { classname } from 'svelte/classname'

const luckyClassName = classname('lucky')
const unluckyClassName = classname('unlucky')

let isLucky = false

</script>

<Child class={isLucky ? luckyClassName : unluckyClassName} on:click={() => isLucky = !isLucky} />

<style>
// mark as used
.lucky {
  color: red;
}

// mark as used
.unlucky {
  color: blue;
}
</style>

Alternatives considered

No

Importance

would make my life easier

[ramiroaisen]

This would really make a big difference for me, having the ability to pass unique classNames from parent to child components would be a big win