svelte-preprocess-css-hash

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

Usage no npm install needed!

<script type="module">
  import sveltePreprocessCssHash from 'https://cdn.skypack.dev/svelte-preprocess-css-hash';
</script>

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

License

MIT