My team found it rather hard to determine which stage to use – or whether it would be easier to stay with a certain stage and enable some features specifically.
So I ended up with a table of postcss-cssnext features, their postcss-preset-env counterparts (where I knew the option name) and the stage for each feature.
postcss-cssnextfeatures are from the feature documentation page- Deprecation infos are from the blogpost by @MoOx
- Stages are from the
postcss-preset-envfeature documentation page - Option names are from @jonathantneal's comment
Here you go:
| cssnext feature | preset-env option | stage |
|---|---|---|
| automatic vendor prefixes (link) | done via autoprefixer | / |
custom properties & var() (link) |
custom-properties | stage 3 |
custom properties set & @apply (link) |
🚫 | 🚫 (removed, see here) |
reduced calc() (link) |
🚫 | 🚫 (removed) |
| custom media queries (link) | custom-media-queries | stage 1 |
| media queries ranges (link) | media-query-ranges | stage 3 |
| custom selectors (link) | custom-selectors | stage 1 |
| nesting (link) | nesting-rules | stage 0 |
image-set() function (link) |
image-set-function | stage 2 |
color() function (link) |
color-mod-function | stage 2 |
hwb() function (link) |
color-functional-notation | stage 2 |
gray() function (link) |
color-functional-notation | stage 2 |
#rrggbbaa colors (link) |
hexadecimal-alpha-notation | stage 2 |
rgba function (rgb fallback) (link) |
🚫 | 🚫 (removed) |
rebeccapurple color (link) |
rebeccapurple-color | stage 2 💜 |
font-variant property (link) |
font-variant-property | stage 3 |
filter property (link) |
🚫 | 🚫 (too old 😉) |
initial value (link) |
all-property | stage 3 |
rem unit (px fallback) (link) |
🚫 | 🚫 (removed) |
:any-link pseudo-class (link) |
any-link-pseudo-class | stage 2 |
:matches pseudo-class (link) |
matches-pseudo-class | stage 2 |
:not pseudo-class (link) |
not-pseudo-class | stage 2 |
:: pseudo syntax (: fallback) (link) |
🚫 | 🚫 (removed) |
overflow-wrap property (word-wrap fallback) (link) |
overflow-wrap-property | stage 2 |
| attribute case insensitive (link) | case-insensitive-attributes | stage 2 |
rgb() function (functional-notation) (link) |
color-functional-notation | stage 1 |
hsl() function (functional-notation) (link) |
color-functional-notation | stage 1 |
system-ui font-family (link) |
system-ui | stage 2 |
We went with stage 2 and enabling nesting and custom-media-queries in the end :)
Thanks so much for this! finding what was in which stage was crazy. 👍