postcss/autoprefixer 2.0.0

2.0 “Hongik Ingan”

on GitHub

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.