Skip to main content

PostCSS Preset Env

postcss-preset-env lets you use modern CSS features today by converting them to browser-compatible CSS based on your target browsers. It is built on PostCSS and uses data from caniuse.com and MDN.

Usage​

Preset Env is a CSS processor that can be enabled from the style editor menu, or configured via the processors property of the configuration object.

When enabled, modern CSS features (like @custom-media, @nest, color functions, etc.) are transpiled to browser-compatible CSS.

Preset Env can be used alongside other processors. Multiple processors are applied in the order they appear in the style editor menu.

note

Autoprefixer is disabled by default when using Preset Env (since Preset Env handles prefixing). Enable Autoprefixer separately if needed.

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Preset Env Demo</h1>\n  <p>Modern CSS features are transpiled for browser compatibility. Check the <strong>Compiled</strong> tab to see the output.</p>\n  <div class=\"card\">Nesting and custom properties</div>\n  <div class=\"card feature\">Modern color functions</div>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".card {\n  background: oklch(0.5 0.2 240);\n  color: white;\n  padding: 1em;\n  border-radius: 8px;\n  margin-bottom: 1em;\n\n  &.feature {\n    background: oklch(0.6 0.2 120);\n  }\n\n  & .title {\n    font-size: 1.2em;\n    font-weight: bold;\n  }\n}\n"
    },
    "processors": [
      "postcssPresetEnv"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
createPlayground('#container', options);

Processor Info​

Name​

postcssPresetEnv

Editor​

style

Processor​

postcss-preset-env

Version​

postcss-preset-env: v10.4.0

Custom Settings​

Custom settings added to the property postcssPresetEnv are passed as options to postcss-preset-env. Please check the documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings
{
  "postcssPresetEnv": {
    "stage": 2,
    "features": {
      "nesting-rules": true
    }
  }
}
Sponsors