README
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;
}
</style>
<ChildComponent class="--child-cls" />
output:
<style>
:global(.--child-cls-pXX_fA) {
color: red;
}
:global(.--child-cls-pXX_fA:hover .nested-cls) {
color: green;
}
</style>
<ChildComponent class="--child-cls-pXX_fA" />
Class name with :global(.--*)
format will be hashed.
It's simply a find-replace operation. So you could pass the class name as other prop name. 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()
]
};