PostCSS Preset Env: Stages & Browserslist

PostCSS Preset Env is a PostCSS plugin bundle that lets developers write modern/draft CSS syntax today, converting it into equivalent CSS the project's actually-targeted browsers already support -- similar in spirit to how Babel transpiles modern JavaScript.

Setup

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-preset-env')({ stage: 2 }),
  ],
}

// package.json
// "browserslist": ["> 0.5%", "last 2 versions", "not dead"]

browserslist Drives the Output

The browserslist config determines which transforms/prefixes are actually necessary. Update browserslist to drop an old browser, and PostCSS Preset Env automatically stops generating fallback CSS for features that browser needed -- no manual rewrite.

The `stage` Option

CSS features move through draft maturity stages, similar to TC39's JS proposal process. A lower stage number enables earlier, less stable features; a higher stage restricts to features closer to finalization -- production code typically favors a more conservative stage.

Example: CSS Nesting

/* Written using draft CSS nesting syntax */
.card {
  padding: 1rem;

  & .title {
    font-weight: bold;
  }
}

/* PostCSS Preset Env transforms this into flat, broadly-supported CSS */
.card { padding: 1rem; }
.card .title { font-weight: bold; }