svelte-css-hash-preprocess v0.1.0

svelte-css-hash-preprocess

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

Example

input:

<style>
:global(.--child-cls) {
  color: red;
}
</style>

<ChildComponent class="--child-cls" />

output:

<style>
:global(.--child-cls-o_ymK9rQg8Q) {
  color: red;
}
</style>

<ChildComponent class="--child-cls-o_ymK9rQg8Q" />

Class name with :global(.--*) format will be hashed.

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-css-hash-preprocess');

module.exports = {
  preprocess: [
    cssHash()
  ]
};

License

MIT