¿Qué es PostCSS?

A medida que avanzamos en el desarrollo web (y en CSS en particular), nos iremos dando cuenta que la mayor parte del tiempo lo invertimos en realizar tareas repetitivas una y otra vez, y que lo ideal sería tener una forma de automatizar dichas tareas.

Ahí es donde entra en escena PostCSS, una estupenda herramienta que permite darle mayor versatilidad a nuestro código CSS, automatizando tareas, realizando trabajo extra por nosotros y, en resumen, ahorrándonos trabajo.

¿Cómo funciona PostCSS?

CSS es un formato que los navegadores comprenden y saben interpretar. Sin embargo, el formato PostCSS es un formato que, en principio, los navegadores no entenderán. En general, el código utilizado en un fichero PostCSS será igual (o muy parecido) a CSS, pero habrán detalles que podrían no ser estrictamente código CSS estándar.

La herramienta PostCSS, realmente sólo es una aplicación Javascript que transpila código, o lo que es lo mismo, pasa de un código fuente concreto, en nuestro caso: de formato PostCSS a formato CSS:

Y como veremos a continuación, esto nos ofrece múltiples características interesantes.

OJO: Al usar PostCSS convendría no usar extensiones .pcss o .postcss. Es muy habitual encontrarnos con que, para simplificar, se use la misma extensión .css incluso para ficheros PostCSS.

Instalación de PostCSS

PostCSS es una herramienta de terminal (linea de comandos), sin embargo, se suele utilizar junto a otras herramientas de modo que no haga falta utilizar la terminal para usarla. Sin embargo, en este tutorial y para comprender como funciona, si la utilizaremos desde la terminal. Más adelante, convendría utilizarla con Vite o algún automatizador para simplificar su uso.

Para comenzar a trabajar con PostCSS, vamos a instalarlo desde una línea de comandos (CLI) con npm y poder ejecutarlo para nuestras primeras pruebas en nuestro proyecto:

$ npm install -D postcss-cli postcss

$ npx postcss --version
1.0.0

Esto instalará PostCSS en la carpeta node_modules, y tendremos la herramienta lista para procesar nuestros archivos PostCSS. No te olvides de instalarlo con el flag -D o --save-dev, ya que se trata de una herramienta de desarrollo que generará los archivos definitivos para producción, por lo que no tiene sentido tenerlo como dependencia de producción.

Ejecutando PostCSS

Vamos a crear un pequeño ejemplo para ver el funcionamiento de PostCSS. Para ello, imaginemos que tenemos una web y debemos darle soporte a Internet Explorer. Hoy en día hay características que los navegadores modernos soportan, pero Internet Explorer no. Vamos a crear un fichero original.css (PostCSS) donde escribiremos nuestro código CSS moderno, que posteriormente será convertido a código CSS soportado por Internet Explorer.

En el ejemplo vamos a utilizar una característica denominada Nesting CSS (anidamiento css), que permite escribir código CSS de forma más legible y mantenible «para humanos», procesarla con PostCSS y quitarle el Nesting CSS, lo que podría ser útil para dar soporte a navegadores muy antiguos que no lo soportan.

Preparando nuestro fichero original

Este es nuestro código CSS con nesting:

.container {
  color: #444;

  & .item {
    background: blue;
    color: white;
  }
}

Esta forma de anidamiento de CSS (y escribir código en general) nos permite crear agrupaciones por entidades y que el código sea mucho más fácil de entender, organizar y gestionar, sobre todo si hace mucho tiempo que no lees el código (o incluso si nunca antes lo has leído).

Transpilando con PostCSS

Ahora, mediante PostCSS, podemos convertir este código a CSS estándar compatible con navegadores antiguos, el cuál si será capaz de leerlo dicho navegador. Para ello, ejecutamos postcss utilizando npx e indicamos la ruta del fichero original.css como se ve a continuación.

Si lo hacemos correctamente, nos aparecerá lo siguiente:

$ npx postcss original.pcss
.container {
  color: #444;

  & .item {
    background: blue;
    color: white;
  }
}

/*# sourceMappingURL=data:application/json;base64,**códigolargoeininteligible**== */

Como se puede ver, no parece haber hecho nada. Nos muestra el mismo contenido del fichero PostCSS original, añadiendo un comentario al final del archivo. Ese comentario es un Source Maps, lo podemos omitir utilizando el flag --no-map. Pero seguimos con el problema de que no ha hecho nada, el CSS es exactamente igual.

Es importante saber que PostCSS funciona a base de plugins. Es decir, por si solo, PostCSS no realiza ninguna acción. Lee el fichero de origen y lo devuelve sin cambios.

Usando plugins con PostCSS

Así pues, vamos a instalar el plugin de PostCSS necesario para la funcionalidad que queremos probar: convertir Nesting CSS a CSS tradicional sin nesting. El plugin en cuestión que utilizaremos es postcss-nesting:

$ npm install -D postcss-nesting

Una vez instalado (recuerda utilizar el parámetro -D) lo tendremos en la carpeta node_modules del proyecto, por lo que ahora sí podremos utilizarlo con PostCSS, usando el flag -u (use) de postcss:

$ npx postcss original.css -u postcss-nesting --no-map
.container {
  color: #444;
}
.container .item {
  background: blue;
  color: white;
}

¡Ahora sí ha hecho el cambio! Vamos a instalar otro plugin llamado cssnano, que sirve para minificar CSS, es decir, quitar espacios, ENTER, comentarios y carácteres innecesarios para que el archivo pese menos.

Primero, instalamos el plugin cssnano, luego lo añadimos a la lista de plugins y ejecutamos:

npm install -D cssnano

$ npx postcss original.css -u postcss-nesting -u cssnano --no-map
.container{color:#444}.container .item{background:blue;color:#fff}

Sin embargo, obtener el resultado final por pantalla no suele ser muy práctico, por lo que podemos añadir el parámetro -o index.css para indicar a PostCSS que queremos que lo guarde en un fichero final llamado index.css en lugar de mostrarlo por pantalla:

$ npx postcss original.pcss -u postcss-nesting -u cssnano --no-map -o index.css

Creo que a estas alturas nos vamos imaginando lo útil que puede ser automatizar estas tareas. Hemos procesado un fichero con PostCSS, con varios plugins cargados, generando código CSS que cumpla ciertas restricciones, en nuestro caso que sea compatible con navegadores antiguos.

Muy a grandes rasgos, esto es lo que hace PostCSS. Sin embargo, esas restricciones las decidimos nosotros. Imagina que construímos una lista con varios plugins diferentes, que realizan múltiples transformaciones automatizando tareas, organizando código, corrigiendo o avisando de errores, etc... Estas son las ventajas que brinda PostCSS.

En PostCSS se puede crear un fichero de configuración para no tener que crear comandos con muchos parámetros, sin embargo, una vez has entendido como funciona PostCSS, te recomiendo utilizar Vite donde ya viene integrado, y no requiere todos estos pasos, sino sólo crear un fichero de configuración.

Plugins populares de PostCSS

Antes de profundizar más, mencionar que el ecosistema de PostCSS es bastante grande y existen plugins para prácticamente cualquier tarea:

Existen muchos más, pero estos son algunos de los plugins que podemos encontrar para PostCSS.