5.0 “Pravda vítězí”

Autoprefixer 5.0 uses PostCSS 4.0 and Browserslist.

Browserslist

Browserslist is a library to parse browsers queries like last 2 versions. It gives to Autoprefixer:

• More accurate usage statistics calculation.
• New > 5% in US query to select browsers by usage statistics in some country.
• Global browserslist config. It is used in many other tools like Autopolyfiller or doiuse. Now you have one place to storage supported browsers across different tools.

New Properties

With @yisibl help Autoprefixer 5.0 now adds -o- prefix for object-fit and object-position properties and -webkit- prefix for CSS Shapes properties.

Other Changes

• Fix UC Browser in debug info.
• Remove autoprefixer.defaults and use defaults from Browserslist.

4.0.2

• Remove o-border-radius, which is common mistake in legacy CSS.

4.0.1

• Fix @supports support with brackets in values (by @iamvdo).

4.0 “Indivisibiliter ac Inseparabiliter”

Autoprefixer 4.0 is based on PostCSS 3.0, so it become 2,5 times faster.

Sources Maps

PostCSS 3.0 sets map.inline and map.sourcesContent to true by default, since it is now the most popular way to use maps.

Previous source map is now used in more places. If you miss from option, PostCSS will take file name from file field in source map. If CSS contains syntax errors, PostCSS will show origin source of error even if you concatenate many files before Autoprefixer.

Also PostCSS 3.0 now supports Unicode BOM symbol in source maps and better works with sourceMappingURL annotation comment.

Cleaning

By default Autoprefixer removes outdated prefixes.

Now you can disable this behavior by remove: false option:

autoprefixer()
  .process('a { -webkit-border-radius: 2px; border-radius: 2px }');
// remove outdated -webkit-border-radius

autoprefixer({ remove: false })
  .process('a { -webkit-border-radius: 2px; border-radius: 2px }');
// keeps -webkit-border-radius

Other Changes

• Add box-decoration-break support.
• Do not add old -webkit- prefix for gradients with px units.
• Parse at-rules without spaces like @import"file".

3.1.2

• Update Firefox ESR version from 24 to 31.

3.1.1

• Use Flexbox 2009 spec for Android stock browser < 4.4.

3.1 “Satyameva Jayate”

- Do not remove comments from prefixed values (by @rousso1). - Allow Safari 6.1 to use final Flexbox spec (by @radium-v). - Fix `filter` value in `transition` in Webkits. - Show greetings if your browsers don’t require any prefixes. - Add `<=` and `<` browsers requirement (by @papandreou).

3.0.1

• Fix autoprefixer.postcss in callbacks.

3.0 “Liberté, Égalité, Fraternité”

Autoprefixer 3.0 changes browsers API, adds autoprefixer-core package and uses GNU style for syntax error messages.

API Changes

Method autoprefixer() had confused and too difficult options. @sindresorhus showed issue and @lydell suggested new API.

Now you will set browsers list in browsers key with other options:

autoprefixer({ browsers: ['> 5%', 'IE 7'], cascade: false }).process(css).css;

If you want to clean CSS from any prefixes you should set [] instead of deprecated none.

var cleaner = autoprefixer({ browsers: [] });

Old API was deprecated and prints warnings. It will be removed in 3.1 release.

Core Package

@MoOx and @jonathanong noticed, that autoprefixer package contained many unnecessary code for plugin like grunt-autoprefixer.

So Autoprefixer was split to autoprefixer and autoprefixer-core npm packages. CLI tool and all file system code and dependencies were moved from autoprefixer-core to autoprefixer.

Package autoprefixer provide same API as autoprefixer-core, but all plugin developers should use only autoprefixer-core.

GNU Style for Syntax Errors

Autoprefixer 3.0 uses new PostCSS 2.2. It uses GNU Coding Standards for syntax error messages:

a.css:2:1 Unexpected { in decls

CoffeeScript and other tools uses same format and some IDE can parse this format and open wrong line in editor.

ES6 Migration

To be more familiar to new developers PostCSS was rewritten from CoffeeScript to JS ES6. Now Autoprefixer starts to use more ES6.

Autoprefixer package now contains only ES6 code. Autoprefixer Core uses ES6 only in built tasks, but we want to rewrite it completely.

Maybe you want to help us in ES6 migration? Work is very easy, but it will be routine. This help will makes you one of the biggest contributor (because you will changes many files :) ). Write me and I will send you instructions.

PostCSS Organization

Autoprefixer and Autoprefixer Core repositories was moved to PostCSS organization to be with other official PostCSS plugins.

2.2 “Mobilis in mobili”

Autoprefixer 2.2 is based on PostCSS 2.1 with Safe Mode and brings control comments to disable Autoprefixer in some part of CSS.

PostCSS 2.1

New version of PostCSS was totally rewritten from CoffeeScript to ES6, but Autoprefixer users will see only 2 features: Safe Mode and better error messages.

Now Autoprefixer had special Safe Mode, which try to fix broken CSS. For example, it will parse a { as a {}. It will be useful for live input tool or to parse old legacy code.

autoprefixer.process('a {');                 // will throw "Unclosed block"
autoprefixer.process('a {', { safe: true }); // process CSS as a {}

You can now try Safe Mode on live input in Autoprefixer interactive demo by @simevidas.

Also by @jonathanong idea CSS syntax error messages now include broken source line:

> autoprefixer.process('a {\n  b { }\n}')
Can't parse CSS: Unexpected { in decls at line 2:5
a {
  b { }
    ^
}

PostCSS will try to detect environment and use colors in error output if they are supported.

Control Comments

Autoprefixer was designed without any interface. You just write CSS and Autoprefixer process it in background.

For example, it detects hacks automatically, when you use outdated prefix to control special browser:

a {
    transform: scale(0.5);
    -moz-transform: scale(0.6)
}

But sometimes we need control. Now you can disable Autoprefixer for some rules and write prefixes manually. Just put /* autoprefixer: off */ control comment inside rule:

a {
    transition: 1s; /* it will be prefixed */
}

b {
    /* autoprefixer: off */
    transition: 1s; /* it will not be prefixed */
}

Also you can use control comments recursively:

/* autoprefixer: off */
@support (transition: all) {
    /* autoprefixer: on */
    a {
        /* autoprefixer: off */
    }
}