PostCSS desde terminal

Una vez sabemos que es PostCSS (y que funciona a base de plugins), podemos realizar una detallada búsqueda de PostCSS en NPM para encontrar paquetes que nos servirán para nuestros proyectos.

Aunque en general, lo normal es utilizar PostCSS como una herramienta que funciona debajo de un automatizador (como Vite, Webpack, etc...), también se puede utilizar como una herramienta de línea de comandos para hacer scripts personalizados.

Instalación

Una vez en una nueva carpeta vacía, creamos un nuevo proyecto con npm init. Luego, instalamos el paquete principal postcss-cli y un plugin, como por ejemplo, autoprefixer (o el que queramos usar):

$ npm init -y
$ npm install -D postcss-cli autoprefixer

Con esto lo tendríamos todo listo para empezar a utilizar PostCSS en la línea de comandos.

Uso

Lo primero es partir desde un fichero index.css como el que indicamos a continuación:

body {
  mask: none
}

Ahora, solo tenemos que ejecutar el comando npx postcss-cli. Observa con atención, ya que hacemos varias cosas:

$ npx postcss-cli index.css -u autoprefixer -o index.min.css

• El comando npx ejecuta un comando instalado con npm, en este caso, postcss-cli
• El fichero index.css es el fichero de entrada que queremos que lea.
• Con -u autoprefixer le indicamos el plugin autoprefixer que queremos utilizar.
• Con -o index.min.css le indicamos el nombre del fichero final que va a crear.

Ese fichero final, debería verse parecido al siguiente:

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

Parámetros de PostCSS

Vamos a ver algunas de las opciones y parámetros que tiene PostCSS en su versión de línea de comandos, que además se pueden configurar posteriormente en un fichero de configuración:

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 de configuración 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:

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 (un fichero 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, y lo podemos nombrar de una de estas dos formas:

• Simplemente, con el nombre postcss.config.mjs
• Con el nombre postcss.config.js si tenemos el type: "module" en el package.json.

El contenido del fichero de configuración sería el siguiente:

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.