6.6.1

• Add metadata to use Autoprefixer in JSS tests (by @cvle).

6.6 “Kaiyuan”

This release uses Browserslist 1.5 and is focused on sharing browsers with babel-preset-env and create-react-app.

package.json

We know that many developers hate the current mess of config files in the project root.

With Autoprefixer 6.6 you can specify browsers in package.json to reduce config files:

{
  "private": true,
  "devDependencies": {
    "autoprefixer": "^6.6.0",
    "postcss": "^5.2.6"
  },
  "browserslist": [
    "last 2 versions",
    "ie 9"
  ]
}

Note that we highly recommend specifying browsers in browserslist config or in package.json instead of Autoprefixer option. In this case many other tools will share browsers list, including Stylelint and babel-env-preset.

Environments

In most cases, you should use same browsers list for Autoprefixer in development and production. But right now Autoprefixer share browsers list with many other tools including babel-env-preset.

To improve development performance developers might want to use different target browsers in development.

So both Browserslist config now supports environments:

[development]
last 1 version

[production]
last 2 version
> 1%

  "private": true,
  "devDependencies": {
    "autoprefixer": "^6.6.0",
    "postcss": "^5.2.6"
  },
  "browserslist": {
    "development": [
      "last 1 version"
    ],
    "production": [
      "last 2 version",
      "> 1%"
    ]
  }

Autoprefixer will use env option, BROWSERSLIST_ENV or NODE_ENV to detect current environment.

Custom Browser Statistics

In addition to > 1% and > 1% in US, Browserslist supports > 1% in my stats to select popular versions according your visitors statistics.

To do it you need save JSON data from Google Analytics.

Autoprefixer 6.6 support standard name for this usage data file browserslist-stats.json and will load it automatically, without need to pass stats options.

It is especially useful if you share browsers with other tools without stats option support.

6.5.4

• Fix unitless 0 basis in IE10/IE11 shorthand flex (by Google).

6.5.3

• Add error for popular mistake with browser option instead of browsers.

6.5.2

• Clean prefixes data (by @schiehll).

6.5.1

• Fix selectors with :-- prefix support.

6.5 “Einigkeit und Recht und Freiheit”

Autoprefixer 6.5 brings defaults keyword and fixes Grid support.

defaults

Autoprefixer 6.5 includes Browserslist 1.4 with defaults keyword. So now you could extend default browsers list:

postcss([
  autoprefixer({ browsers: ['defaults', 'ie 9'] })
])

Also don’t miss new tool to check what browsers will be picked by Browserslist: browserl.ist.

CSS Grid Layout

With Autoprefixer small subset of coming CSS Grid Layout will works in IE by adding a -ms- prefix and change the syntax (as we do for Flexbox). In 6.5 we fixed some cases with -ms-grid-row-align.

.container {
    display: grid;
    grid-template-columns: auto 1fr;
}
.element {
    align-self: stretch;
    grid-column-start: 1;
    grid-column-end: span 3;
}

.container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 1fr;
    grid-template-columns: auto 1fr;
}
.element {
    -ms-grid-row-align: stretch;
    align-self: stretch;
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-span: 3;
    grid-column-end: span 3;
}

Flexbox

align-self has same syntax in final and 2009 Flexbox specification.

In 6.5 we fixed when Autopefixer removed -webkit-align-self even if final spec is still in requirements.

6.4.1

• Fix node cloning after some PostCSS plugins.

6.4 “Hic et ubique terrarum”

Autoprefixer 6.4 brings :any-link and text-decoration-skip support.

New Support

New Autoprefixer will compile:

:any-link {
    text-decoration-skip: ink;
}

to:

:-webkit-any-link {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip: ink;
}
:-moz-any-link {
  text-decoration-skip: ink;
}
:any-link {
  -webkit-text-decoration-skip: ink.;
          text-decoration-skip: ink;
}

Transition

Autoprefixer 6.4 support reverse parameters in transition:

.foo {
    transition: 200ms color;
}

Also we fix transition prefixing in Opera 12.

Other

• Fix -webkit- prefix for backface-visibility.
• Fix rad unit support in gradients (by @gucong3000).
• Removed Safari TP Grid prefixes support.

6.3.7

• Fix rare Cannot read property 'constructor' of null issue.