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 {
    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, 222, 199);
  }

@media (color-gamut: p3) {
  a  > span {
    color: color(display-p3 0.33498 0.86864 0.78466);
  }
}

input:hover, input:focus, button:hover, button:focus {
  color: rgb(131, 27, 0);
}

@media (color-gamut: p3) {
  input:hover, input:focus, button:hover, button:focus {
    color: color(display-p3 0.49362 0.10739 0);
  }
}

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
        features: {},
      },
    ],
  ]
}

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 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.

  • cascade layers
  • :is() pseudo class
  • media query ranges
  • nesting rules
  • oklab() function
  • custom selectors
  • light-dark()
  • 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!

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

Latest version: 10.0.6
See CHANGELOG