Yo prefiero PostCSS

  ...
    plugins: [
      postcssPresetEnv({
        stage: 1
      }),
    ]
  ...

style.css

article {
  & p {
    color: var(--color-text);
  }
}

Con una configuración de stage: 1 postcss-prest-env parseará nuestro CSS utilizando los plugins necesarios para dar soporte a las especificaciones de estado 1 o superior. De esta forma, cuando nesting esté en stage 4 ya no se usará el plugin de nesting, ya que lo tendremos soportado de forma nativa.

Use tomorrow’s CSS today

Como el propio eslogan de postcss-preset-env nos indica, podemos utilizar sintaxis del mañana, hoy.

En muchas ocasiones hago referencia a escribir CSS estándar de forma errónea, ya que en otros preprocesadores también se puede escribir CSS estándar. Mi error está en llamarlo estándar y querer referirme a escribir una sintaxis de CSS que acabará en el estándar, ya que es parte de la especificación, pero en un estado de borrador o release candidate. Veamos unos ejemplos.

El siguiente código no está soportado por los navegadores actuales, pero lo estará, y es un código que no podemos escribir con preprocesadores como Sass, el cual no haría ningún tipo de transformación en el proceso de compilación.

image-set() function

Este sería nuestro código CSS que escribimos, para cargar una imagen u otra según la resolución del dispositivo. Lo mismo que podemos hacer con el tag <picture> en HTML, pero directamente con las imágenes de background de nuestro CSS.

.example {
  background-image: image-set(
    url(img.png) 1x,
    url(img@2x.png) 2x,
    url(img@print.png) 600dpi
  );
}

Esto lo podremos hacer de forma nativa (estándar) cuando tengamos soporte en todos los navegadores, como podemos ver en la especificación del módulo CSS Image.

El plugin que se encargará de transformar esté código a CSS que entiendan todos los navegadores es postcss-image-set-function y este sería el código de salida de nuestro ejemplo.

.example {
  background-image: url(img.png);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .example {
    background-image: url(img@2x.png);
  }
}

@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {
  .example {
    background-image: url(my@print.png);
  }
}

.example {
  background-image: image-set(
    url(img.png) 1x,
    url(img@2x.png) 2x,
    url(img@print.png) 600dpi
  );
}

Simplemente añadiría el fallback para dar soporte a los navegadores que lo necesite.

¿Os suena esto?, es el mismo escenario que tenemos en JavaScript. Transpiladores como Babel nos permiten escribir sintaxis como el Optiona Chaining y dar cobertura a Interner Explorer 11.