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 */
    }
}

2.1.1

• Fix -webkit-background-size hack for contain and cover values.
• Don’t add -webkit- prefix to filter with SVG (by @iamvdo).

2.1 “Eleftheria i thanatos”

- Add support for `clip-path` and `mask` properties. - Fix 2.0.2 issue and return `-webkit-` prefix to `filter` with SVG URI. Thanks to @iamvdo for notice.

2.0.2

• Add readable names for new browsers from 2.0 release.
• Don’t add -webkit- prefix to filter with SVG URI.
• Don’t add -o- prefix 3D transforms.

2.0.1

• Save declaration style, when clone declaration to prefix.

2.0 “Hongik Ingan”

This version based on PostCSS 1.0, supports @supports and enable visual cascade by default.

PostCSS 1.0

New PostCSS release has a lot of improvements, but source map API update is most important for Autoprefixer’s users.

@lydell suggested great plan to clean up options. Now all map options will be inside map object.

• inlineMap: true was renamed to map: { inline: true }.
• mapAnnotation: false was renamed to map: { annotation: false }.
• Previous source map should be set to separated option map: { prev: prevMap } instead of old map: prevMap.

There is map: 'inline' shortcut if you want to set only map: { inline: true }. Old options are deprecated and will print warnings.

Also there is two API improvements for plugin’s popular needs:

• Map can contain origin CSS source, if you set map: { sourcesContent: true } option.
• You can change result map path by map: { annotation: '../maps/app.css.map' } option. Note that path in annotation must be relative to output CSS file.

Property result.map will contains SourceMapGenerator object (from Mozilla’s source-map) instead of string. It will allow to change something in generated map:

var result = autoprefixer.process(css, { map: true });
result.map.applySourceMap(otherMap, 'undetected.css');

console.log('map: ' + result.map) // SourceMapGenerator has toString() method,
                                  // so old code should work
result.map.toJSON().file // But also you can access to generated map properties

Check out all changes in PostCSS docs.

Visual Cascade

By idea from @paulirish, Autoprefixer from 1.1 version has option for prefixes cascade. But this feature was disabled by default, because old Autoprefixer can’t restore own cascade, when it removes prefixes.

New Autoprefixer can restore prefixes cascade, when it remove unnecessary prefixes. So, now we can enable visual cascade by default.

a {
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px
}

b {
    user-select: none
}

will be processed to:

a {
    border-radius: 4px;
}

b {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none
}

Cascade will be used, only if you process uncompressed CSS. Use cascade: false option to disable cascade, if you don’t like it.

@supports At-rule

CSS 3 added new @supports at-rule to use some styles, only if browser supports properties and values in at-rule conditions.

For example, we can set some styles only for browsers, which support fit-content width:

.menu {
  width: 400px
}

@supports (width: fit-content) {
     /* content will be used, only if browser supports fit-content */
    .menu {
        width: fit-content
    }
}

But Chrome doesn’t know fit-content, it knows only -webkit-fit-content. So we need to use prefixed properties and values in @support.

@callumacrae suggested this feature and explained how it should works. And now Autoprefixer 2.0 supports this at-rule and adds prefixes inside it conditions:

@supports ((width: -webkit-fit-content) or (width: -moz-fit-content) or (width: fit-content)) {
     /* content will be used, only if browser supports fit-content */
    .menu {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }
}

Other Changes

• Autoprefixer now supports all browsers from Can I Use: ie_mob, and_chr, and_ff, op_mob and op_mini.
• Autoprefixer is written on CoffeeScript, so you wasn’t be able to use latest unreleased versions from GitHub. Now code contains special hack and you can use latest Autoprefixer by
  "autoprefixer": "ai/autoprefixer" in your npm’s package.json.
• Binary now has --no-cascade, --annotation and --sources-content options and deprecates
  -c and --cascade.

1.3.1

• Fix gradient hack, when background property contains color.

1.3 “Tenka Fubu”

• Add text-size-adjust support.
• Add background-size to support Android 2.

1.2 “Meiji”

Autoprefixer uses Can I Use data. Previous versions contain Can I Use dump inside npm package and I had special script to update this data from Can I Use repo. I manually run this scripts every day. It was a hack, not a good solution.

Few month ago @Fyrd started to publish official caniuse-db npm package. Autoprefixer 1.2 start to use this official data instead of local copy.

This changes made Autoprefixer’s maintaining much easier, but also it gives a few benefits to end-users:

1. Autoprefixer stops to use strange 1.1.20140605 versions with dump date in minor part. Now it will be normal versions like 1.2.0.
2. You can update Can I Use data separetly from Autoprefixer’s code. It is important for big companies, which have long test period on every code changes. Now you can have up-to-date browsers data and don’t be worry to broke styles.
3. Autoprefixer extremely cares about actual prefix data. In previous version there was day delay between Can I Use updates and Autoprefixer release. Now you will get faster updates directly from Can I Use author. Don’t forget to call npm update caniuse-db.