postcss/autoprefixer 2.2.0

2.2 “Mobilis in mobili”

on GitHub

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