¿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?

El formato .css es un formato que los navegadores comprenden y saben interpretar. Sin embargo, el formato .postcss o .pcss 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 no serán 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 en formato .postcss, a otro código fuente concreto, en nuestro caso .css:

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

OJO: Aunque al principio solemos utilizar la extensión .pcss o .postcss (para diferenciarlo de un fichero .css estándar), es muy habitual encontrarnos con que, para simplificar, se use la misma extensión .css incluso para los ficheros PostCSS.

Instalación de PostCSS

Para comenzar a trabajar con PostCSS necesitaremos tenerlo instalado en nuestro proyecto. PostCSS es simplemente una aplicación Javascript de línea de comandos (CLI), por lo que podemos instalarla con npm en nuestro proyecto y ejecutarla mediante npx:

$ npm install --save-dev postcss-cli postcss

$ npx postcss --version
8.3.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 --save-dev o -D, 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.

Ten en cuenta que si lo deseas, también puedes instalar la herramienta de terminal de PostCSS de forma global. De esta forma se instalará en el sistema sin que esté asociada al proyecto. Tienes más información sobre esto en Instalaciones globales de NPM.

Preparando el fichero PostCSS

Vamos a crear un pequeño ejemplo para ejemplificar el funcionamiento de la mecánica de transpilación de PostCSS. Para ello, vamos a crear un fichero index.pcss donde escribiremos nuestro código CSS no estándar, que posteriormente será convertido a código CSS estándar.

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», pero incompatible para navegadores (al menos, de momento):

.container {
  color: #444;

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

Observa que este código de ejemplo no es más que una forma de escribir lo que en CSS estándar sería el selector .container .item. Dicho así, parece que no ofrece ventajas, pero si continuamos escribiendo código, comenzaremos a ver las ventajas.

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).

Ejecutando PostCSS

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

Si lo hacemos correctamente, nos aparecerá el siguiente error:

$ npx postcss index.pcss

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing.
Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

(...Código del index.pcss...)

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

En este ejemplo anterior, el error aparece porque hemos ejecutado PostCSS sin utilizar aún ningún plugin, por lo tanto, nos avisa del error y nos devuelve exactamente el mismo código del fichero index.pcss.

Ejecutando plugins en PostCSS

Así pues, vamos a instalar el plugin de PostCSS necesario para la funcionalidad que queremos probar (nesting css). El plugin en cuestión es postcss-nesting:

$ npm install --save-dev postcss-nesting

Una vez instalado (recuerda utilizar el parámetro --save-dev) 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 index.pcss -u postcss-nesting --no-map

Se puede ver que también estamos usando el parámetro --no-map para que no nos muestre al final una linea de generación del source-map (relación entre el fichero original y el CSS resultante) que comienza por algo parecido a /*# sourceMappingURL=.

El comando anterior nos devolverá el siguiente código por pantalla:

.container {
  animation: name 1s;
  color: #444
}
.container .item {
  background: blue;
  color: white;
}

Pero 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 en lugar de mostrarlo por pantalla:

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

Hemos procesado un fichero con PostCSS, con un plugin cargado, generando código CSS estándar que entienda el navegador. Muy a grandes rasgos, esto es lo que hace PostCSS. Pero ahora 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.

Más adelante veremos más parámetros de PostCSS, así como la posibilidad de crear un fichero de configuración para no tener que crear comandos con muchos parámetros, así como sistemas que automatizan y hacen mucho más sencillo y práctico el uso de PostCSS.

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:

Plugin	Descripción
autoprefixer	Añade prefijos CSS automáticamente, basándose en CanIUse.
css-modules	Aplica la estrategia CSS Modules para aislar CSS y evitar la cascada.
stylelint	Linter de código CSS, compatible también con preprocesadores como LESS o Sass.
postcss-preset-env	Convierte CSS no soportado por navegadores en CSS soportado. El Babel de CSS.
cssnano	Minificador de código CSS.
purgecss	Elimina código CSS muerto (no utilizado) de nuestros proyectos.

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