DEV Community

Joel Humberto Gómez Paredes
Joel Humberto Gómez Paredes

Posted on

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.

Meme confundido

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'];
Enter fullscreen mode Exit fullscreen mode

Meme que asco

Definitivamente prefiero esta opción

import style from 'styles.module.css';

style['Button'];
Enter fullscreen mode Exit fullscreen mode

Meme que agradable sujeto

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.

Meme seguro que asi funciona la cosa

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;
}
Enter fullscreen mode Exit fullscreen mode

Aquí embebemos nuestro archivo puro

// styles.module.scss
@use 'my-lib/dist/Button.css';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)