postcss/autoprefixer 6.1.0

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

on GitHub

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.