PostCSS Preset Env: Custom Media, Autoprefixer & Trade-offs

Custom Media Queries

@custom-media --small-viewport (max-width: 30em);

.sidebar {
  display: none;
}

@media (--small-viewport) {
  .sidebar { display: block; }
}

/* A named, reusable media condition -- avoids repeating the
   same breakpoint value across many @media rules */

Bundled Autoprefixer

PostCSS Preset Env includes Autoprefixer by default, so vendor-prefixed properties are added automatically based on the same browserslist config -- no separate autoprefixer setup needed.

Custom Property Fallbacks

:root { --main-color: #3b82f6; }

.button {
  background: var(--main-color);
}

/* Where computable, a static fallback value can be generated
   for browsers with incomplete custom-property support */

PostCSS Preset Env vs. Sass

Sass introduces its own bespoke syntax (@if, @each) that isn't part of the CSS spec. PostCSS Preset Env instead transforms genuine draft W3C/CSSWG CSS syntax -- code written against it should need little to no rewriting once browsers gain native support, since it targets where CSS is actually heading.

The Trade-off of Very Early Stages

Enabling very early-stage draft features (a low stage number) risks depending on syntax that could still change or be dropped before standardization -- a real consideration for production code, where a more conservative stage is often the safer default.