postcss-preset-env

Start using modern CSS today

Modern CSS

:root {
--mainColor: #12345678;
}

body {
color: var(--mainColor);
font-family: system-ui;
}

a {
color: rgb(0 0 100% / 90%);

&:hover {
color: rebeccapurple;
}

& span {
font-weight: bold;
}
}

:is(input, button):is(:hover, :focus) {
color: oklch(40% 0.268735435 34.568626);
}

Becomes...

:root {
--mainColor: rgba(18,52,86,0.47059);
}

body {
color: rgba(18,52,86,0.47059);
color: var(--mainColor);
font-family: system-ui,
-apple-system,
Segoe UI,
Roboto,
Ubuntu,
Cantarell,
Noto Sans,
sans-serif;
}

a {
color: rgba(0, 0, 255, 0.9)
}

a:hover {
color: #639;
}

a span {
font-weight: bold;
}

input:hover {
color: rgb(143, 0, 0);
color: color(display-p3 0.52929 0.00000 0.00000);
}

input:focus {
color: rgb(143, 0, 0);
color: color(display-p3 0.52929 0.00000 0.00000);
}

button:hover {
color: rgb(143, 0, 0);
color: color(display-p3 0.52929 0.00000 0.00000);
}

button:focus {
color: rgb(143, 0, 0);
color: color(display-p3 0.52929 0.00000 0.00000);
}

Getting Started

  1. Install postcss-preset-env from npm.
  2. Add postcss-preset-env to your configuration.

Here's an example with a postcss.config.js file:

module.exports = {
plugins: [
[
'postcss-preset-env',
{
// Options
},
],
]
}

You can read more on how to use and install PostCSS Preset Env.

Tomorrow's CSS features are already available. Start using them today

With postcss-preset-env you can use last features such as alpha hex color, break properties and other modern CSS functions. Check out the full features list.

  • custom properties
  • :is pseudo class
  • media query ranges
  • nesting rules
  • lab() function
  • system-ui font family
  • custom selectors
  • color() function

Select stage of CSS Specs

You can select which stage of CSS Specification you want to use. Or if you won't configure, PostCSS Preset Env will enable Stage 2 features and supports all browsers.

There are also lots of options you can tweak!

Person staring at some sliders

Works with PostCSS

PostCSS is the tool for transforming CSS with JavaScript with over 60 million downloads every week. If PostCSS is enabled, adding PostCSS Preset Env is just a breeze!

Trusted by millions

PostCSS Preset Env is downloaded more than 6 million times a week from NPM. Found a bug? Let us know on GitHub!

Latest version: 7.5.0
See CHANGELOG