Open
Description
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
FeldrinH, jrmoynihan, I-am-tk, Baxterboom, aolose and 4 more