포함 CSS 모듈 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 surgio 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 모듈 en el distribuible final de mi biblioteca, porque sería bastante pero bastante complicado para los 개발자 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'];

확실한 사전 선택 옵션

import style from 'styles.module.css';

style['Button'];

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

클라로 케 시

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 nuestro distributable.



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 기능.

Este archivo Representativea 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 consumer el archivo que será procesado agregando los modulos

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