I Prefer PostCSS

style.css

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

With a configuration of stage: 1, postcss-preset-env will parse our CSS using the necessary plugins to support state 1 or higher specifications. This way, when nesting is at stage 4, the nesting plugin will no longer be used, since we’ll have it natively supported.

Use tomorrow’s CSS today

As postcss-preset-env’s own slogan indicates, we can use tomorrow’s syntax today.

On many occasions I mistakenly refer to writing standard CSS, since in other preprocessors you can also write standard CSS. My error is in calling it standard when I want to refer to writing CSS syntax that will end up in the standard, since it’s part of the specification, but in a draft or release candidate state. Let’s see some examples.

The following code is not supported by current browsers, but it will be, and it’s code we can’t write with preprocessors like Sass, which wouldn’t do any kind of transformation in the compilation process.

image-set() function

This would be our CSS code that we write, to load one image or another depending on device resolution. The same thing we can do with the <picture> tag in HTML, but directly with background images in our CSS.

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

We’ll be able to do this natively (standard) when we have support in all browsers, as we can see in the CSS Image module specification.

The plugin that will transform this code to CSS that all browsers understand is postcss-image-set-function and this would be the output code of our example.

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

It would simply add the fallback to support browsers that need it.

Does this sound familiar? It’s the same scenario we have in JavaScript. Transpilers like Babel allow us to write syntax like Optional Chaining and provide coverage for Internet Explorer 11.