¿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 no lo entiende. En general, el código 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 convierte (transpila) código de PostCSS a CSS:

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

Instalación de PostCSS

PostCSS es una herramienta de terminal (linea de comandos), sin embargo, suele venir incorporada en automatizadores como Vite o similares, por lo que no hace falta utilizarlo desde una terminal.

Por ejemplo, veamos como instalarla en un proyecto creado con vite:

$ npm create vite@latest
> test-project
> Vanilla
> JavaScript

$ cd test-project
$ npm install
$ npm install -D autoprefixer

Esto creará un proyecto básico de Vite, y una vez en la carpeta del proyecto, instalamos todo y le añadimos el plugin autoprefixer para usarlo de ejemplo con PostCSS. Vite aplica PostCSS automáticamente a todos los ficheros .css utilizados si encuentra un fichero de configuración de PostCSS postcss.config.js junto al archivo package.json. Así que, vamos a crearlo.

Configuración de PostCSS

Creamos un fichero postcss.config.js en la carpeta raíz del proyecto (donde tenemos otros archivos como el package.json o el .gitignore), y le añadimos el siguiente contenido:

export default {
  plugins: {
    "autoprefixer": true
  }
}

Dentro del objeto plugins añadimos el nombre del plugin específico, y usamos true para activarlo o false para desactivarlo temporalmente. En el caso de que se puedan añadir opciones a ese plugin, en lugar de true o false, usaríamos un objeto con las opciones a utilizar.

Recuerda que es importante que el nombre del plugin de PostCSS a activar haya sido instalado antes con npm, como hicimos con el npm install -D autoprefixer. De lo contrario, no funcionará.

Una vez hecho esto, Vite ya debería aplicar PostCSS en nuestro proyecto.

Uso de PostCSS

Como estamos utilizando Vite y tenemos un fichero de configuración creado, PostCSS se usará automáticamente. Para comprobar si efectivamente está funcionando, vamos a hacer lo siguiente:

body {
  mask: none;
}

body{mask:none}

body{-webkit-mask:none;mask:none}

Es importante tener en cuenta que PostCSS por si sólo no hace nada. Su funcionalidad se la dan los plugins. En este ejemplo hemos instalado el plugin autoprefixer para dar compatibilidad con navegadores antiguos añadiendo automáticamente los prefijos CSS.

Esto puede ser interesante para añadir ciertos plugins que automaticen ciertas tareas o realicen comportamientos interesantes para nuestros desarrollos CSS.

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 que tenga que ver con CSS:

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