Configuración de PostCSS

Una vez sabemos que es PostCSS (y que funciona a base de plugins), podemos realiza una detallada búsqueda de PostCSS en NPM para encontrar paquetes que nos servirán para nuestros proyectos, pero que sin duda, se haría incómodo configurar y ejecutar desde una línea de comandos debido a la gran cantidad de configuración necesaria.

Es entonces cuando nos comienza a interesar crear un fichero de configuración donde guardar toda la información de como gestionar PostCSS en nuestro proyecto, que plugins utilizar, así como otros detalles relacionados.

Parámetros de PostCSS

Antes de comenzar con el fichero de configuración, vamos a ver algunas de las opciones que tiene PostCSS en su línea de comandos, que también se podrán aplicar más adelante en el fichero de configuración:

Opción	Abrev.	Descripción
`--output`	`-o`	Indica el fichero de destino que se generará, habitualmente `index.css`.
`--dir`	`-d`	Indica una carpeta de destino. Útil cuando quieres convertir varios archivos.
`--map`	`-m`	Indica un sourcemap (relación entre origen y destino), habitualmente `index.css.map`.
`--no-map`		Desactiva la generación de la última línea del CSS con el sourcemapping.
`--verbose`		Activa la modalidad de depuración (muestra todo lo que hace).
`--watch`		PostCSS se queda activo esperando cambios en ficheros, y procesando en ese caso.
`--env`		Establece variables de entorno.
`--use`		Usa los plugins de PostCSS indicados.
`--ext`		Utiliza la extensión indicada en los ficheros de destino. Útil para usar con `-d`.
`--config`		Establece la carpeta donde buscará los archivos de configuración. Por defecto, raíz.

Uno de los parámetros más interesantes es --watch, que permite mantener PostCSS vigilando cambios en el fichero (o carpeta) indicado y cuando detecte que hay cambios (escribimos en nuestro editor), ejecuta PostCSS actualizando los cambios en el fichero destino generado.

Fichero de configuración

PostCSS permite crear ficheros de configuración para obtener todos esos parámetros de dicho fichero y no tener que pasarselos a postcss desde la linea de comandos. Generalmente, estos ficheros tienen el nombre .postcssrc o postcss.config.js. En el caso de que exista alguno de los dos en la carpeta raíz del proyecto, PostCSS cargará la configuración que reside en ellos.

Si queremos indicarle otra ruta (en lugar de la carpeta raíz) podemos utilizar el parámetro postcss --config data, que buscará un fichero de configuración en la carpeta data.

Los ficheros de configuración suelen tener uno de los siguientes nombres:

Nombre del fichero	Formato	Descripción
`.postcssrc`	JSON	Fichero oculto. No soporta comentarios ni código JS. Más sencillo.
`postcss.config.js`	Javascript	Soporta comentarios. Permite código JS. Más flexible.

Por ejemplo, queremos crear un fichero de configuración que cargue dos plugin de PostCSS. En primer lugar, el plugin postcss-nesting del que hablamos en el artículo anterior, y en segundo lugar, otro plugin bastante popular llamado autoprefixer, que sirve para añadir automáticamente los prefijos CSS de navegadores.

Así pues, deberíamos crear un fichero .postcssrc (JSON) en la carpeta raíz del proyecto:

{
  "plugins": {
    "postcss-nesting": true,
    "autoprefixer": true
  }
}

Si en cambio preferimos crear su fichero de configuración equivalente en Javascript, lo nombramos como postcss.config.mjs (o .js) y escribimos el código que tenemos a continuación:

export default {
  plugins: {
    "postcss-nesting": true,    /* Nesting CSS */
    "cssnano": true             /* CSS Vendor prefixes */
  }
}

El formato de configuración de PostCSS, es un formato JSON en el que la clave plugins contiene una lista de plugins de PostCSS, donde la clave es el nombre del paquete y el valor puede ser:

a true, que significa que el plugin está activado.
a false, que significa que el plugin está desactivado.
con más elementos, que se usará como opciones del plugin en cuestión.

Por ejemplo, observa el contenido de ejemplo de este postcss.config.js. En él, activamos el plugin postcss-preset-env, pero en lugar de aplicarle un booleano para activar o desactivarlo, le indicamos un donde establecemos una configuración personalizada, que a su vez, PostCSS transmitirá al plugin para que tome los valores indicados:

module.exports = {
  plugins: {
    "postcss-preset-env": {
      "stage": 3,
      "features": {
        "nesting-rules": true
      }
    }
  }
}

Más adelante veremos como funciona este plugin en cuestión, pero lo importante es que quede claro la forma de indicar los parámetros, en este caso, enviando un parámetro stage con valor numérico 3 y un objeto features que tiene la caracaterística nesting-rules activada.

Ejecutando PostCSS

Una vez tengamos la configuración deseada guardada en nuestro fichero de configuración, por ejemplo, postcss.config.js, sólo nos quedaría ejecutar el comando postcss:

$ npx postcss --watch src/css/index.pcss -o dist/css/index.css

En este ejemplo, busca automáticamente el fichero de configuración postcss.config.js, aplica los datos que tenemos en él, y luego obtiene los datos que le pasamos a postcss mediante la linea de comandos, donde:

Con --watch indicamos que no termine la ejecución de PostCSS, sino que vigile cambios y vuelva a generar el .css final si los hay.
Con src/css/index.pcss indicamos la ruta y nombre del fichero PostCSS de origen.
Con -o dist/css/index.css indicamos la ruta y nombre del fichero .css de destino.

Ten en cuenta que para trabajar con PostCSS, habitualmente se utiliza una herramienta de automatización como Vite, Webpack, Parcel, Gulp, Rollup o similar, que permite gestionar el proyecto y organizarlo todo en conjunto. Aquí nos centramos en entender como se configura PostCSS si lo necesitas de forma independiente.