postcss/autoprefixer 6.0.0

6.0 “Eureka”

on GitHub

Autoprefixer 6.0 uses PostCSS 5.0 and Browserslist 1.0 and brings many new prefixes.

The big change in Autoprefixer 6.0 is that we removed the CLI and join autoprefixer and autoprefixer-core packages. Find and replace autoprefixer-core with autoprefixer in your package.json.

The official CLI for Autoprefixer is postcss-cli, because we should be cooperative with the PostCSS ecosystem, where CSS revolution is happening right now (see CSS Modules for example).

But you can still use old CLI too. It was moved to autoprefixer-cli.

Under the Hood

Autoprefixer 6.0 is based on PostCSS 5.0 and Browserslist 1.0.

Let’s start from bad breaking news:

• Deprecated autoprefixer(opt).process(css) was removed in favor of autoprefixer.process(css, opt), common for all PostCSS plugins.
• safe option was removed in favor of PostCSS Safe Parser
• Opera 12.1 was removed from default query. It was awesome browser, but new Blink’s Opera was released for all platforms a long time ago.

That bad things is out payment for all this awesome features:

• Autoprefixer now supports Custom Syntaxes from PostCSS. As result you can add prefixes directly to SCSS sources by postcss-scss. Or can use Autoprefixer in isomorphic/universal JS directly to CSS-in-JS object.
• Autoprefixer now uses PostCSS 5.0 API, so you can use it with new PostCSS runners without any warnings.
• Now we have Microsoft Edge support by @andrepolischuk.
• You can use not word in browsers query. Because Edge and IE are different browses, last 2 browsers will include IE 11, 10 and Edge. Use last 2 browsers, not IE 10 if you want only 2 versions of Microsoft browsers.
• @ben-eb adds browsers versions ranges like IE 6-9.

Prefixes

When I started Autoprefixer 2 years ago, I thought we would stop seeing new prefixes. Unfortunately, the Safari team has a different view. As a result, Autoprefixer 6.0 presents many new shining prefixes:

• @yisibl add very important image-set() prefixes. See also postcss-image-set.
• Also @yisibl fix mask support by adding mask-border properties.
• @iamvdo add many new awesome Safari features: filter(), element()
  and backdrop-filter. He also wrote article with good examples about this new things.
• Add CSS Regions support.
• Add Scroll Snap Points support.
• Add writing-mode support.
• Add ::backdrop support for fullscreen apps.
• Add cross-fade() support.
• Add other break- properties to multicolumn support.

Other Changes

• Always show old gradient direction warning.
• Fix filter in transition support on Safari.
• Fix pixelated cleaning.
• PostCSS 5.0 fixes url() parsing.