Explorando Pigment CSS, una biblioteca CSS-in-JS de tiempo de ejecución cero de MUI

CSS-in-JS es un enfoque moderno para diseñar aplicaciones web, donde el CSS se escribe directamente en archivos JavaScript. Esto permite que los estilos CSS se integren en un componente. Muchos desarrolladores, especialmente en la comunidad React, han adoptado el enfoque CSS-in-JS.

Las bibliotecas CSS-in-JS más populares son styled-components y Emotion . MUI, una biblioteca de componentes de React, lanzó recientemente una prometedora biblioteca CSS-in-JS sin tiempo de ejecución llamada Pigment CSS . Este artículo explorará las características y beneficios de Pigment CSS, comparándola con styled-components y Emotion en cuanto a rendimiento, características, experiencia del desarrollador y soporte de la comunidad.

Pigmento CSS

Pigment CSS es una biblioteca CSS-in-JS sin tiempo de ejecución, mantenida por el equipo de Material UI y desarrollada sobre WyW-in-JS (o “Lo que quieras en JS”). Extrae estilos coubicados a sus propios archivos CSS durante la compilación. Pigment CSS actualmente es compatible con Next.js y Vite.

El concepto de CSS-in-JS sin tiempo de ejecución busca combinar las ventajas de CSS-in-JS con las ventajas de rendimiento del CSS tradicional. En este caso, todos los estilos se compilan en archivos CSS estáticos durante la compilación, eliminando la sobrecarga en tiempo de ejecución. Esto mejora el rendimiento, especialmente al cargar la página por primera vez.

Características principales de Pigment CSS

Pigment CSS ofrece las ventajas de CSS-in-JS, como estilos de ámbito local y posibilidad de crear temas, a la vez que evita el coste de rendimiento en tiempo de ejecución que suelen asociarse con las bibliotecas CSS-in-JS. Algunas de sus características clave son:

Tiempo de ejecución cero

Los estilos se preprocesan durante la fase de compilación. No se inyectan ni se recalculan durante la ejecución. Esto mejora el rendimiento de la aplicación.

Tematización

La creación de temas es una función opcional que permite reutilizar los mismos valores de estilo en toda la aplicación. Los objetos de tema solo se utilizan durante la compilación y no se incluyen en el paquete final de JavaScript.

Integración con herramientas de compilación

Pigment CSS se integra perfectamente con Next.js y Vite, y será compatible con más empaquetadores en el futuro. Esto facilita la incorporación de Pigment CSS a aplicaciones React existentes sin necesidad de una configuración significativa.

Pigment CSS le permite definir CSS de dos maneras: utilizando sintaxis de estilo de objeto, donde los estilos se definen utilizando objetos JavaScript, o sintaxis de estilo de plantilla, donde los estilos CSS se escriben utilizando literales de plantilla.

Comparación de Pigment CSS, Emotion y componentes con estilo

Pigment CSS usa CSS-in-JS en tiempo de ejecución cero, mientras que styled-components usa CSS-in-JS en tiempo de ejecución y Emotion usa CSS-in-JS en tiempo de ejecución con opciones para extraer estilos estáticos.

Las tres bibliotecas se pueden comparar de la siguiente manera:

• Rendimiento : debido a su enfoque de tiempo de ejecución cero, Pigment CSS ha reducido el rendimiento del tiempo de ejecución pero ha aumentado el tiempo de compilación.
• Impacto en el tamaño del paquete : Los estilos CSS de Pigment se compilan en archivos CSS puros durante la compilación, lo que minimiza el impacto en el tamaño del paquete de JavaScript. Por otro lado, los componentes con estilo inyectan estilos en el DOM durante la ejecución mediante JavaScript. Emotion puede operar en dos modos: ejecución pura o extracción estática de estilos.
• Estilo dinámico : Pigment CSS requiere que declares todos los estilos y tengas en cuenta todas las combinaciones de propiedades. styled-components y Emotion se destacan en aplicaciones donde los estilos necesitan reaccionar dinámicamente a los estados de los componentes o propiedades.
• Experiencia del desarrollador : Pigment CSS ofrece una experiencia de desarrollador similar a la de los componentes con estilo y Emotion. Los tres mejoran la legibilidad al mantener los estilos estrechamente vinculados a los componentes. Sin embargo, una diferencia notable radica en cómo se definen los estilos: en Pigment CSS, a diferencia de pasar propiedades para estilos condicionales, todas las variantes de estilo deben estar predefinidas.
• Herramientas y ecosistema : los componentes con estilo y Emotion tienen una ligera ventaja en términos de integraciones y recursos de la comunidad debido a su popularidad y su mayor trayectoria en el mercado.

Consulta nuestro artículo que compara los componentes con estilo y Emotion para obtener un análisis más profundo.

Uso de Pigment CSS

Para usar Pigment CSS, primero debes configurarlo en tu aplicación Next.js o Vite. En este tutorial, usaremos una aplicación Next.js.

Pigment CSS simplifica la creación de estilos y componentes reutilizables para tu aplicación gracias a sus diversas API. Puedes usar la cssAPI para crear estilos reutilizables, la styledAPI para crear un componente pasando estilos al final o la keyframesAPI para crear fotogramas clave de animación reutilizables. Un objeto de tema también permite reutilizar los mismos valores de estilo en toda la aplicación.

Configuración de Pigment CSS

En su aplicación Next.js, instale Pigment CSS usando el siguiente comando:

npm instalar @pigment - css / reactnpm install -- guardar - dev @pigment - css / nextjs - complemento

Este comando instala la biblioteca CSS Pigment y el complemento Next.js.

A continuación, en su archivo, importe el complemento y envuelva la configuración de Next.js como se muestra a continuación:next.config.mjswithPigment

importar { withPigment } desde '@pigment-css/nextjs-plugin' ; const nextConfig = {}; exportar predeterminado withPigment ( nextConfig );     

En su archivo, importe la hoja de estilos CSS Pigment como se muestra:layout.tsx

importar '@pigment-css/react/styles.css' ;

Con esto, estás listo para utilizar los estilos CSS de Pigment.

Uso básico de Pigment CSS

Primero, usaremos la cssAPI para crear nuestros estilos. Puedes usar la sintaxis template`or` objectcomo se muestra a continuación:

importar { css } de "@pigment-css/react" ; // sintaxis de la plantilla const bodyBackground = css ` background - color : # 1D2125 ; color : # fff ; `; // sintaxis del objeto const mainClass = css ({ display : "flex" , flexDirection : "column" , alignItems : "center" , justifyContent : "center" , });         

Para aplicar los estilos a su elemento DOM, agregue el estilo como un nombre de clase a su elemento:

html lang = "es" nombreClase = {bodyBackground} /html main nombreClase = {mainClass} /main   

A continuación, usaremos la styledAPI para crear nuestros componentes con estilo. Aquí, creamos un encabezado con estilo y añadimos variantes según las propiedades:

const Encabezado = estilo ( 'div' )({   tamaño de fuente : "2rem" ,   color : "#9FADBC" ,   peso de fuente : "negrita" ,   margen : "1rem" ,   variantes : [ {       accesorios : { variante : 'éxito' },       estilo : { color : '#23AD79' }, }, {       accesorios : { tamaño : 'pequeño' },       estilo : { tamaño de fuente : '1.5rem' }, }, ], });                                     

Luego, añadimos el componente a nuestro DOM como se muestra a continuación. Un encabezado usa los estilos base, mientras que el otro usa los estilos variantes sobre el estilo base:

 Encabezado  Pigment CSS / Encabezado   Encabezado variante = "éxito" tamaño = "pequeño"  Prueba de estilo / Encabezado  

También puedes aplicar estilo a tus componentes según los valores de tiempo de ejecución. El isErrorvalor de la propiedad se desconoce de antemano. Se utiliza para aplicar estilo al encabezado en una función de devolución de llamada:

const Encabezado = estilo ( 'div' )({   tamaño de fuente : "2rem" ,   color : ({ isError }: { isError : boolean }) = ( isError ? 'rojo' : '#9FADBC' ),   peso de fuente : "negrita" ,   margen : "1rem" , });            

El valor de la propiedad se pasa al componente. Aquí, el color del encabezado se establece en función del isErrorvalor:

Heading isError  Estilo de prueba /Heading 

Temas con Pigment CSS

Esta función opcional permite reutilizar los mismos valores de estilo en toda la aplicación mediante un objeto de tema. Puede usar esta extendThemeutilidad para generar variables CSS a partir de su objeto de tema.

Primero, para la seguridad de tipos, definamos nuestra interfaz de tema en un archivo como se muestra a continuación:theme.d.ts

importar { ExtendTheme } desde "@pigment-css/react/theme" ; declarar módulo "@pigment-css/react/theme" { interfaz ThemeTokens {         esquema de color :{             claro : {                 primario : cadena ;                 secundario : cadena ;                 fondo : cadena ;                 texto : cadena ;                 error : cadena ; };             oscuro : {                 primario : cadena ;                 secundario : cadena ;                 fondo : cadena ;                 texto : cadena ;                 error : cadena ; }; } } interfaz ThemeArgs {         tema : ExtendTheme {             esquema de color : "claro" | "oscuro"             tokens : ThemeTokens }; } }                                                                         

En el fragmento de código anterior, modificamos el módulo de tema CSS Pigment. Añadimos nuestro ThemeTokens[nombre del archivo], que debe coincidir con nuestro objeto de tema. Luego, redefinimos [nombre del archivo] ThemeArgscon nuestro esquema de color y tokens.

Ahora, configuraremos el módulo de tema includeen el archivo de configuración de TypeScript:

  "incluir": [ "tema.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/tipos/**/*.ts"],    

En nuestro archivo, añadimos una opción de tema a la función. También usamos la utilidad para generar variables CSS para nuestro tema:next.configwithPigmentextendTheme

importar { withPigment , extendTheme } desde '@pigment-css/nextjs-plugin' ; constante nextConfig = {}; exportar predeterminado conPigment ( nextConfig , { tema : extendTheme ( { colorScheme : { claro : { primario : "#9FADBC" , secundario : '#23AD79' , fondo : '#fff' , texto : '#000' , error : '#CC3131' }, oscuro : { primario : "#9FADBC" , secundario : '#23AD79' , fondo : '#1D2125' , texto : '#fff' , error : '#CC3131' }, } }), });                                                       

Podemos usar las variables de tema generadas en las cssAPI styledcomo se muestra. Puedes aplicar estilos basados ​​en el esquema de color mediante la consulta de medios o las funciones asociadas a :prefers-color-schemeapplyStylesextendTheme

// sintaxis de la plantilla const bodyBackground = css ` background-color: ${({ theme }) = theme.colorScheme.dark.background}; color: ${({ theme }) = theme.colorScheme.dark.text}; @media(prefiere-color-scheme:light) { background-color: ${({ theme }) = theme.colorScheme.light.background}; color: ${({ theme }) = theme.colorScheme.light.text}; } `; // sintaxis del objeto const bodyBackground = css (({ tema }) = ({ ... tema . applyStyles ( "claro" , { colorDeFondo : tema . colorScheme . claro . fondo , color : tema . colorScheme . claro . texto , }), ... tema . applyStyles ( "oscuro" , { colorDeFondo : tema . colorScheme . oscuro . fondo , color : tema .colorScheme.texto oscuro, }) }) ).                    

Conclusión

Este tutorial exploró Pigment CSS, la nueva biblioteca CSS-in-JS de MUI, una biblioteca de ejecución cero. Analizamos sus características principales y la comparamos con bibliotecas CSS-in-JS comunes como Emotion y styled-components. También repasamos algunos aspectos básicos de la biblioteca Pigment CSS, como el uso de las cssAPI styledy la creación de temas.

Al momento de escribir este artículo, Pigment CSS aún se encuentra en una versión preliminar. La biblioteca incorporará más funciones y mejoras a medida que crezca.

¡Feliz codificación!

Si quieres conocer otros artículos parecidos a Explorando Pigment CSS, una biblioteca CSS-in-JS de tiempo de ejecución cero de MUI puedes visitar la categoría Guias.