Awesome
svelte-preprocess-css-hash
Passing hashed css class name to child component. It is used to avoid class name conflicts.
Example
input:
<style>
:global(.--child-cls) {
color: red;
}
:global(.--child-cls:hover .--nested-cls) {
color: green;
}
:global(html.night .--child-cls .--nested-cls) {
color: blue;
}
</style>
<ChildComponent class="--child-cls" />
output:
<style>
:global(.--child-cls-pXX_fA) {
color: red;
}
/* only the first class name that is prefixed with '--' will be hashed */
:global(.--child-cls-pXX_fA:hover .--nested-cls) {
color: green;
}
:global(html.night .--child-cls-pXX_fA .--nested-cls) {
color: blue;
}
</style>
<ChildComponent class="--child-cls-pXX_fA" />
The first class name that is prefixed with -- within :global() will be hashed.
It's simply a find-replace operation. So you could pass the class names to other attributes. For example:
<ChildComponent wrapperCls="--wrapper" contentCls="--content" />
And in child component, you can receive the class name as a normal prop:
ChildComponent.svelte:
<script>
let className = '';
export { className as class };
</script>
<div class={className}>
...
</div>
How to use
Create a svelte.config.js file in your project root folder with following contents:
const cssHash = require('svelte-preprocess-css-hash');
module.exports = {
preprocess: [
cssHash()
]
};