<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" />

<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" />

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

<script>
  let className = '';
  export { className as class };
</script>
<div class={className}>
...
</div>