postcss-preset-env

What is postcss-preset-env?

The postcss-preset-env package is a plugin for PostCSS, a tool for transforming CSS with JavaScript. This package allows developers to use future CSS features today. It converts modern CSS into something most browsers can understand, determining the polyfills needed based on the target browsers or runtime environments specified by the developer. It's like Babel but for CSS.

What are postcss-preset-env's main functionalities?

Stage 0-4 CSS features

Enables the use of future CSS features by setting the stage from 0 to 4. Lower stages include more experimental features.

postcssPresetEnv({
  stage: 0
})

Custom Media Queries

Allows the use of custom media queries, making it easier to manage and reuse media queries.

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
  /* CSS rules for small viewport */
}

Custom Properties (CSS Variables)

Facilitates the use of CSS variables for easier theme management and component styling.

:root {
  --mainColor: #123456;
}

a {
  color: var(--mainColor);
}

Nested Rules

Supports nesting rules within rules, similar to what is possible in preprocessors like SASS or LESS.

a {
  &::before {
    content: '';
  }
}

Other packages similar to postcss-preset-env

autoprefixer

Autoprefixer is a PostCSS plugin that parses your CSS and adds vendor prefixes to CSS rules using values from Can I Use. It is similar to postcss-preset-env in that it helps make modern CSS compatible with different browsers. However, autoprefixer focuses specifically on adding necessary prefixes, while postcss-preset-env includes this functionality as part of a broader feature set.

cssnano

cssnano is a modular minifier for CSS, also built on top of PostCSS. It optimizes CSS by rewriting rules, reducing whitespace, and through other transformations. While cssnano focuses on minimizing CSS for production environments, postcss-preset-env focuses on enabling future CSS features for development. Both can be used together in a build process for optimal results.

postcss-cssnext

postcss-cssnext was a predecessor to postcss-preset-env that allowed you to use future CSS features. However, postcss-preset-env has since replaced postcss-cssnext, offering a more updated and comprehensive solution for using modern CSS today. postcss-cssnext is no longer maintained, making postcss-preset-env the preferred choice for developers looking to use future CSS features.

README

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/[e-mail]) 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/[e-mail])
  }
}

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

Usage

Add PostCSS Preset Env to your build tool:

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

Node

Use PostCSS Preset Env to process your CSS:

require('postcss-preset-env').process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PostCSS Preset Env as a plugin:

postcss([
  require('postcss-preset-env')()
]).process(YOUR_CSS);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use PostCSS Preset Env in your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
  return gulp.src('./src/*.css').pipe(
    postcss([
      require('postcss-preset-env')()
    ])
  ).pipe(
    gulp.dest('.')
  );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PostCSS Preset Env in your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
        require('postcss-preset-env')()
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});

Options

stage

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.

require('postcss-preset-env')({
  stage: 0
})

features

The features key determines which CSS features to polyfill based upon their unique specification 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.

require('postcss-preset-env')({
  stage: false,
  features: [ 'css-nesting' ]
})

browsers

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.

require('postcss-preset-env')({
  browsers: 'last two versions'
})

insertBefore / insertAfter

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.

require('postcss-preset-env')({
  insertBefore: {
    'css-color-modifying-colors': require('postcss-simple-vars')
  }
})