Using PostCSS Preset Env to Write Future‑Ready CSS Today

Problem: Want to use upcoming CSS syntax now

Modern CSS specifications introduce useful features such as nesting, custom media queries, and logical properties. Waiting for universal browser support can delay adoption, and maintaining separate fallback stylesheets adds overhead.

Solution: PostCSS Preset Env as a transpiler

PostCSS Preset Env reads your CSS, applies the transformations defined by the preset, and emits CSS that matches a target browserslist. Features that are already supported in the target browsers are left unchanged; unsupported features are polyfilled or rewritten using fallbacks.

Worked Example: Nesting and custom media queries

Create a source file src/style.css with the following content:

/* src/style.css */
:root {
  --color: #fff;
}

a {
  color: var(--color);
  &:hover {
    color: #000;
  }
}

@custom-media --narrow-window (max-width: 400px);

@media --narrow-window {
  .sidebar {
    display: none;
  }
}

Run PostCSS with the preset, targeting browsers that cover more than 0.2% of global usage:

npx postcss src/style.css --use postcss-preset-env --browserslist ">0.2%" --output dist/style.css

After the command finishes, open dist/style.css and look for:

• Nesting replaced by explicit selectors (e.g., a:hover).
• The custom media query expanded to a standard @media rule.
• CSS variables preserved because they are supported in the target range.

Trade‑offs and Limitations

• Build‑time complexity: you need to maintain a PostCSS configuration and keep the plugin up‑to‑date.
• Output size may grow when polyfills are inserted for unsupported features.
• Features that rely on runtime values, such as env() or selector(), cannot be fully polyfilled; they will be left as‑is or dropped depending on the preset options.

Verification and Practical Checks

1. Inspect the generated CSS (dist/style.css) to confirm that nesting has been flattened and custom media queries have been expanded.
2. Test the output in a modern browser (e.g., latest Chrome) and a legacy browser covered by your browserslist (e.g., IE11 if included) to ensure no syntax errors appear.
3. Run the resulting CSS through the W3C CSS Validator () to verify that the output is syntactically valid.

Actionable Closing

Add PostCSS Preset Env to your build pipeline, keep your browserslist file aligned with the actual support matrix of your project, and revisit the configuration whenever you drop support for older browsers. This lets you write modern CSS today while delivering compatible styles to all users.