6.1.1

• Fix cursor: grab and cusror: grabbing support.

6.1 “Bil-shaʿb wa lil-shaʿb”

Autoprefixer 6.1 contains new transition logic, CSS-in-JS support, :read-only support and a few other fixes.

New Transition Support

Unfortunately, Safari ignores entire transition rule if it contains unknown properties. This issue became visible, when Safari removed prefixes for transition.

So Autoprefixer now generates more robust CSS and a { transition: filter 1s } will be compiled to:

a {
    -webkit-transition: -webkit-filter 1s;    /* UC and old Safari */
    transition: -webkit-filter 1s;            /* Safari */
    transition: filter 1s;                    /* Future version of Safari */
    transition: filter 1s, -webkit-filter 1s; /* Blink and other browsers */
}

CSS-in-JS

With postcss-js, any PostCSS plugin can be used for React Inline Styles, Radium, Free Style or any other CSS-in-JS flavor. Unfortunately, the previous version of Autoprefixer had a issue that is now resolved.

let prefixer = postcssJs.sync([ autoprefixer ]);

prefixer({
    display: 'flex'
});
//=> {
//        display: ['-webkit-box',
//                  '-webkit-flex',
//                  '-ms-flexbox',
//                  'flex']
//   }

Other Changes

• Add :read-only support.
• Add support for appearance with any values.
• Add loud /*! autoprefixer: off */ control comments support.
• Convert rotateZ to rotate for -ms-transform.
• Use postcss-value-parser to carefully work with gradients.
• Remove -ms-transform-style and -o-transform-style that never existed.

6.0.3

• Fix old gradient direction warning.

6.0.2

• Remove unnecessary -khtml- prefix too.

6.0.1

• Fix cross-fade() support (by @yisibl)

6.0 “Eureka”

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.

5.2.1

• Fix parent-less node issue on some cases (by @joshgillies)

5.2 “Dont tread on me”

Autoprefixer 5.2 is 30% faster, adds prefixes for appearance and uses warnings API from PostCSS 4.1.

Prefixes

• Autoprefixer 5.2 will add -webkit- and -moz- prefixes for appearance: none, because it became part of W3C draft. Note, that only none value is supported.
• In 5.1.6 release we made a mistake by adding ::placeholder pseudo-elements prefixes for :placeholder-shown pseudo-classes selector. This release fixes it.
• There was confused situation with prefixes for image-rendering. Prefixed -moz-crisp-edges value works like W3C’s pixelated, not like crisp-edges. So Autoprefixer 5.2 will add prefixes only for pixelated value.
  Because there is no even plans for crisp-edges browsers support, Autoprefixer will warn you about crisp-edges value in your CSS. It will help you to update styles.
• Also 5.2 release contains fix for text-decoration prefixes.

Warnings

PostCSS 4.1 brings new APIs for plugins. Most important new API for Autoprefixer is a warnings.

Outdated articles and copy-paste developing created many pain for us. There are many code examples with display: box value by 2009 spec, instead of display: flex in final spec. Or many legacy CSS and outdated examples uses old gradient direction syntax (bottom instead of final to top).

Autoprefixer 5.2 will print a warning, when it see outdated syntax in unprefixed properties:

autoprefixer: app.css:104:4: You should write display: flex by final spec instead of display: box

If you develop a builder plugin with Autoprefixer (like gulp-autoprefixer), please print warnings in most proper way for your builder API:

postcss([ autoprefixer ]).then(function (result) {
    result.warnings().forEach(function (warn) {
        console.warn(warn.toString());
    });
    callback(result.css);
});

API

Modular architecture shows great results in PostCSS. So @ben-eb decided to create a modular CSS minifier [cssnano](of course as PostCSS plugin). Autoprefixer 5.2 has special option for it: add: false will disable adding new prefixes, so Autoprefixer will only remove outdated prefixes.

PostCSS now has a great ecosystem. So maintaining Autoprefixer only solution takes too much time. Because Autoprefixer is just a PostCSS plugin, we can deprecate:

• autoprefixer CLI tool. Use postcss-cli instead.
• autoprefixer.process() shortcut. Use PostCSS API instead.

5.1.11

• Update num2fraction to fix resolution media query (by @yisibl).

5.1.10

• Do not generate -webkit-image-rendering.