claxed

Clases con el mismo estilo de componentes de estilo
Ver demostración · Informe de error · Función de solicitud

Sobre el proyecto

La idea nace mientras se usa CSS Tailwind, que es una clases muy útiles FrameWrok que nos brinda todas las clases de CSS para tamaños, colores, espacios. Sin embargo, puede ser desordenado si tiene muchas clases para escribir dentro del componente. ¿Y sin mencionar cuándo desea una clase condicional basada en un accesorio?

Con Claxed, muy inspirado en componentes de estilo, podemos mantener nuestro DOM un poco más limpio con la ayuda de algunos servicios públicos como la interpolación de accesorios dentro de la cadena de plantilla.

Instalación

npm install claxed

o

yarn add claxed

Uso

Si conoce los componentes de estilo, esta sintaxis ya puede ser familiar para usted. Cualquier cosa que escriba dentro de la cadena de plantilla se imprimirá en el atributo class HTML del componente. En el siguiente ejemplo, cada fila es una clase CSS.

 const Button = claxed . button `
  px-3
  py-2
` ;

const ButtonRed = claxed ( Button ) `
  ${ ( { border } ) => border && 'border' }
  text-red-500
` ;

const App = ( ) => (
  < div >
    < Button > Click me </ Button >
    < ButtonRed border > Click me </ ButtonRed >
  </ div >
) ;

// Note: All the falsy values are stripped from the output 

Hoja de ruta

Consulte los problemas abiertos para una lista de características propuestas (y problemas conocidos).

Que contribuye

Las contribuciones son las que hacen que la comunidad de código abierto sea una forma de lugar tan increíble donde aprender, inspirar y crear. Cualquier contribución que haga es muy apreciada .

1. Bifurca el proyecto
2. Cree su rama de características ( git checkout -b feature/AmazingFeature )
3. Comprometer sus cambios ( git commit -m 'Add some AmazingFeature' )
4. Push to the Branch ( git push origin feature/AmazingFeature )
5. Abra una solicitud de extracción

Preguntas frecuentes

¿El orden en el que escribo clases con CLAXED relevante para su especificidad CSS?

No. Claxed solo es responsable de combinar clases CSS y poner el resultado en el atributo HTML `Clase` del componente. Si tiene algún problema de especificidad, debe ver cómo se definen las clases en el archivo CSS

Licencia

Distribuido bajo la licencia MIT. Vea LICENSE para más información.

Contacto

Tommaso Poletti - @Tomma5o

Enlace del proyecto: https://github.com/tomma5o/claxed