Incluyendo CSS modules con clases externas

Contexto, estoy trabajando en una biblioteca estilos y pues bueno necesitaba generar los estilos para poder compartirlos. Una de las dudas que me surgió es:

¿Debería usar CSS modules en esta biblioteca?

La respuesta es ... noooooo ... pero si.

Bueno a lo que me refiero es que no debería usar CSS modules en el distribuible final de mi biblioteca, porque sería bastante pero bastante complicado para los developers usar nombres de clases con hashes y pues si la clase cambia el hash también (aunque podríamos cambiar eso).

Solo imagina tener que usar una clase con este nombre

import style from 'styles.module.css';

style['style-module_Button__a63627'];

Definitivamente prefiero esta opción

import style from 'styles.module.css';

style['Button'];

Uff mucho mejor, pero ahora surge la siguiente pregunta: ¿podrás usar módulos, si exportas el CSS los nombres de las clases que están directamente en texto plano?

Claro que si

La intención de un distribuible/paquete (al menos de este) es entregar una pieza de software que pueda ser consumida de manera nativa (osea por el browser). No obstante normalmente tenemos bundlers y un conjunto de tools en nuestro proceso de construcción que pueden consumir nuestro distribuible.

En mi caso en proyectos externos estoy usando sass (aunque también podría funcionar con postcss). Lo que podemos hacer es tomar los archivos de css con nuestras clases y embeberlos en un archivo.

Por ejemplo en Sass yo use @use y funcionó.

Este archivo representa el css puro que tendríamos en nuestra biblioteca

//my-lib/dist/Button.css
.Buton {
  color: red;
}

Aquí embebemos nuestro archivo puro

// styles.module.scss
@use 'my-lib/dist/Button.css';

Este archivo consume el archivo que será procesado agregando los módulos

import styles from './styles.module.scss';

export const Button = ({ children }) => <button className={styles.Button]}>{children}</button>

Aquí puedes ver un ejemplo de esto funcionando, aunque el archivo css se esta consumiendo de manera local el proceso es similar. Espero les sirva en algún momento, es un hack también por si quieres reusar CSS pero con soporte para CSS Modules