Trying to create a way in vite/rollup for css modules to output a hashed classname and a public class with no

Question

Trying to create a way for css modules to output a hashed classname and a public class name (no-hash).

So

<MyComponent className={styles.myComponent}>
   <Child className={styles.child} />
</MyComponent>

Would output

<div class="__my_component___oCk6T my-component">
  <div class="__my_component__child___oYX6P my-component__child"></div>
</div>

The reason behind this is so that on my library we can use CSS modules how we are suppose to be generate exposed class names for outside usage. So that Someone can pull in the lib and not be restrained when styling.

At the moment i am struggling to find a way to configure this in my vite config. Guessing i would need to build a custom plugin for this.

Any help is appreciated.