Permalink
Browse files

Use Browserslist 1.5

  • Loading branch information...
1 parent 89efe39 commit 3de19bf91d0b175e3c8c8a42aa12d88d4fa344a3 @ai ai committed Dec 22, 2016
View
@@ -126,14 +126,20 @@ Autoprefixer uses [Browserslist], so you can specify the browsers
you want to target in your project by queries like `last 2 versions`
or `> 5%`.
-If you don’t provide the browsers option, Browserslist will try
-to find the `browserslist` config in parent dirs.
+The best way to provide browsers is `browserslist` config
+or `package.json` with `browserslist` key. Put it in your project root.
+
+We recommend to avoid Autoprefixer option and use `browserslist` config
+or `package.json`. In this case browsers will be shared with other tools
+like [babel-preset-env] or [Stylelint].
See [Browserslist docs] for queries, browser names, config format,
and default value.
-[Browserslist]: https://github.com/ai/browserslist
[Browserslist docs]: https://github.com/ai/browserslist#queries
+[babel-preset-env]: https://github.com/babel/babel-preset-env
+[Browserslist]: https://github.com/ai/browserslist
+[Stylelint]: http://stylelint.io/
## Outdated Prefixes
@@ -252,7 +258,7 @@ gulp.task('autoprefixer', function () {
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
- .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
+ .pipe(postcss([ autoprefixer() ]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dest'));
});
@@ -270,8 +276,6 @@ In [webpack] you can use [postcss-loader] with `autoprefixer`
and [other PostCSS plugins].
```js
-var autoprefixer = require('autoprefixer');
-
module.exports = {
module: {
loaders: [
@@ -280,8 +284,17 @@ module.exports = {
loader: "style-loader!css-loader!postcss-loader"
}
]
- },
- postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
+ }
+}
+```
+
+And create a `postcss.config.js` with:
+
+```js
+module.exports = {
+ plugins: [
+ require('autoprefixer')
+ ]
}
```
@@ -302,9 +315,7 @@ module.exports = function(grunt) {
options: {
map: true,
processors: [
- require('autoprefixer')({
- browsers: ['last 2 versions']
- })
+ require('autoprefixer')
]
},
dist: {
@@ -507,15 +518,17 @@ Function `autoprefixer(options)` returns new PostCSS plugin.
See [PostCSS API] for plugin usage documentation.
```js
-var plugin = autoprefixer({ browsers: ['> 1%', 'IE 7'], cascade: false });
+var plugin = autoprefixer({ cascade: false });
```
There are 8 options:
-* `browsers` (array): list of browsers, which are supported in your project.
- You can directly specify browser version (like `IE 7`) or use selections
- (like `last 2 version` or `> 5%`). See [Browserslist docs] for available
+* `browsers` (array): list of browsers query (like `last 2 version`),
+ which are supported in your project. We recommend to use `browserslist`
+ config or `browserslist` key in `package.json`, rather than this option
+ to share browsers with other tools.Wee [Browserslist docs] for available
queries and default value.
+* `env` (string): environment for Browserslist.
* `cascade` (boolean): should Autoprefixer use Visual Cascade,
if CSS is uncompressed. Default: `true`
* `add` (boolean): should Autoprefixer add prefixes. Default is `true`.
@@ -544,6 +557,6 @@ to increase performance.
You can check which browsers are selected and which properties will be prefixed:
```js
-var info = autoprefixer({ browsers: ['last 1 version'] }).info();
+var info = autoprefixer().info();
console.log(info);
```
@@ -45,7 +45,7 @@ module.exports = postcss.plugin 'autoprefixer', (reqs...) ->
cache[key] ||= new Prefixes(module.exports.data.prefixes, browsers, options)
plugin = (css, result) ->
- prefixes = loadPrefixes(from: css.source?.input.file)
+ prefixes = loadPrefixes(from: css.source?.input.file, env: options.env)
timeCapsule(result, prefixes)
prefixes.processor.remove(css) if options.remove != false
prefixes.processor.add(css, result) if options.add != false
View
@@ -24,7 +24,11 @@ class Browsers
# Return browsers selected by requirements
parse: (requirements) ->
- browserslist(requirements, path: @options?.from, stats: @stats)
+ browserslist(requirements,
+ stats: @stats
+ path: @options?.from
+ env: @options?.env
+ )
# Select major browsers versions by criteria
browsers: (criteria) ->
View
@@ -13,9 +13,9 @@
"license": "MIT",
"repository": "postcss/autoprefixer",
"dependencies": {
- "browserslist": "~1.4.0",
- "caniuse-db": "^1.0.30000597",
- "coffee-script": "1.12.1",
+ "browserslist": "~1.5.1",
+ "caniuse-db": "^1.0.30000602",
+ "coffee-script": "^1.12.2",
"normalize-range": "^0.1.2",
"num2fraction": "^1.2.2",
"postcss": "^5.2.6",
@@ -207,6 +207,13 @@ describe 'Autoprefixer', ->
output = read('config/test.out')
postcss([autoprefixer]).process(input, from: path).css.should.eql(output)
+ it 'sets browserslist environment', ->
+ path = __dirname + '/cases/config/test.css'
+ input = read('config/test')
+ output = read('config/test.production')
+ postcss([autoprefixer({ env: 'production' })])
+ .process(input, from: path).css.should.eql(output)
+
it 'works without source in nodes', ->
root = postcss.root()
root.append(selector: 'a')
@@ -1 +1,4 @@
ie 10
+
+[production]
+chrome 25
@@ -0,0 +1,4 @@
+a {
+ display: -webkit-flex;
+ display: flex;
+}

0 comments on commit 3de19bf

Please sign in to comment.