PostCSS Preset Env

PostCSS Preset Env lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments.

npm install postcss-preset-env

@custom-media --viewport-medium (width <= 50rem);
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:root {
  --mainColor: #12345678;
}

body {
  color: var(--mainColor);
  font-family: system-ui;
  overflow-wrap: break-word;
}

:--heading {
  background-image: image-set(url(img/heading.png) 1x, url(img/heading@2x.png) 2x);

  @media (--viewport-medium) {
    margin-block: 0;
  }
}

a {
  color: rebeccapurple;

  &:hover {
    color: color-mod(var(--mainColor) alpha(80%));
  }
}

/* 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, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue;
  word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  background-image: url(img/heading.png);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  h1, h2, h3, h4, h5, h6 {
    background-image: url(img/heading@2x.png)
  }
}

@media (max-width: 50rem) {
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
  }
}

a {
  color: #639
}

a:hover {
  color: rgba(18, 52, 86, 0.8);
}

Without any configuration options, PostCSS Preset Env enables stage 3 features and supports all browsers.

Add PostCSS Preset Env to your build tool:

npm install postcss-preset-env --save-dev

Use PostCSS Preset Env to process your CSS:

import postcssPresetEnv from 'postcss-preset-env';

postcssPresetEnv.process(YOUR_CSS);

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PostCSS Preset Env as a plugin:

import postcss from 'gulp-postcss';
import postcssPresetEnv from 'postcss-preset-env';

postcss([
  postcssPresetEnv(/* options */)
]).process(YOUR_CSS);

Add PostCSS Loader to your build tool:

npm install postcss-loader --save-dev

Use PostCSS Preset Env in your Webpack configuration:

import postcssPresetEnv from 'postcss-preset-env';

export default {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          { loader: 'postcss-loader', options: {
            ident: 'postcss',
            plugins: () => [
              postcssPresetEnv(/* options */)
            ]
          } }
        ]
      }
    ]
  }
}

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use PostCSS Preset Env in your Gulpfile:

import postcss from 'gulp-postcss';
import postcssPresetEnv from 'postcss-preset-env';

gulp.task('css', () => gulp.src('./src/*.css').pipe(
  postcss([
    postcssPresetEnv(/* options */)
  ])
).pipe(
  gulp.dest('.')
));

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PostCSS Preset Env in your Gruntfile:

import postcssPresetEnv from 'postcss-preset-env';

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
       postcssPresetEnv(/* options */)
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});

The stage key determines which CSS features to polyfill, based upon their position in the process of becoming implemented web standards found at cssdb. The stages are 0 through 5. You can specify false to ignore all stages and rely on features exclusively.

postcssPresetEnv({
  stage: 0
})

The features key determines which CSS features to polyfill based upon their unique id found at cssdb. Pass true to enable a feature, and pass false to disable a feature. Pass an object {} to configure options of an individual polyfill. Any features not explicitly toggled here will be determined by stage.

postcssPresetEnv({
  stage: false,
  features: [ 'css-nesting' ]
})

The browsers key determines the browsers to support, which will enable or disable polyfills based upon their support matrix found at caniuse. By default, PostCSS Preset Env will inherit any existing browserslist config, .browserslistrc config, browserslist section in package.json, or browserslist environment variables.

postcssPresetEnv({
  browsers: 'last 2 versions'
})

The insertBefore and insertAfter keys allow you to insert other PostCSS plugins along the chain. This is highly valuable if you are also using sugary PostCSS plugins that must execute between plugins within PostCSS Preset Env. Both insertBefore and insertAfter support chaining one or multiple plugins.

import postcssSimpleVars from 'postcss-simple-vars';

postcssPresetEnv({
  insertBefore: {
    'css-color-modifying-colors': postcssSimpleVars
  }
})