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()
  ]
};

License

MIT