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 {
    color: color-mix(in oklch, cyan, green 25%);
  }
}

: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 {
    color: rgb(0, 223, 199);
    color: color(display-p3 0.33498 0.86864 0.78466);
  }

input:hover, input:focus, button:hover, button:focus {
  color: rgb(140, 0, 0);
  color: color(display-p3 0.50128 0.08996 0);
}

Getting Started

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

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

module.exports = {
  plugins: [
    [
      'postcss-preset-env',
      {
        // Options
        features: {
          'nesting-rules': {
            noIsPseudoSelector: false,
          },
        },
      },
    ],
  ]
}

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

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

postcss-preset-env will provide fallbacks and polyfills for CSS features to make your projects work in as many browsers as possible.

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

Select the stage of CSS Specs

You can select which stage of CSS Specification you want to use. Or use the default and PostCSS Preset Env will enable Stage 2 features.

There are also lots of options you can tweak!

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 7 million times a week from NPM. Found a bug? Let us know on GitHub!

Latest version: 9.3.0
See CHANGELOG