svelte-preprocess-css-hash

Passing hashed css class name to child component. It is used to avoid class name conflicts.

Example

input:

1<style>
2  :global(.-child-cls) {
3    color: red;
4  }
5
6  :global(.-child-cls:hover .-nested-cls) {
7    color: green;
8  }
9
10  :global(html.night .-child-cls .-nested-cls) {
11    color: blue;
12  }
13</style>
14
15<ChildComponent class="-child-cls" />

output:

1<style>
2  :global(.-child-cls-pXX_fA) {
3    color: red;
4  }
5
6  /* only the first class name that is prefixed with '-' will be hashed */
7  :global(.-child-cls-pXX_fA:hover .-nested-cls) {
8    color: green;
9  }
10
11  :global(html.night .-child-cls-pXX_fA .-nested-cls) {
12    color: blue;
13  }
14</style>
15
16<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:

1<ChildComponent wrapperCls="-wrapper" contentCls="-content" />

And in child component, you can receive the class name as a normal prop:

ChildComponent.svelte:

1<script>
2  let className = '';
3  export { className as class };
4</script>
5
6<div class={className}>
7...
8</div>

How to use

Create a svelte.config.js file in your project root folder with following contents:

1const cssHash = require('svelte-preprocess-css-hash')
2
3module.exports = {
4  preprocess: [
5    cssHash()
6  ]
7}

License

MIT