Autoprefixer: Check -webkit-box-shadow

[retyui]

Links:

• http://caniuse.com/css-boxshadow/embed
• http://browserl.ist/?q=last+1+versions

Environment

npm -v // 5.0.2
node -v //v6.9.1

package.json

{
  "name": "test",
  "version": "0.0.0",
  "main": "test.js",
  "devDependencies": {
    "autoprefixer": "^7.1.1",
    "postcss": "^6.0.1"
  }
}

test.js

var autoprefixer = require('autoprefixer');
var postcss      = require('postcss');
var css = `
.example {
    box-shadow: 0 0 0 1px red inset;
}
`;

postcss([ autoprefixer({browsers: 'last 1 versions'}) ]).process(css).then(function (result) {
    result.warnings().forEach(function (warn) {
        console.warn(warn.toString());
    });
    console.log(result.css);
});

Result node ./test.js

.example {
    -webkit-box-shadow: 0 0 0 1px red inset; /* how? */
            box-shadow: 0 0 0 1px red inset;
}

[ai]

Chinese browsers have old webkit inside

[retyui]

@ai how can I ignore this "Chinese browsers" ?

[ai]

If you want to be bad (don’t tell anyone about this bad practice) you can remove any browsers from Autoprefixer by browserslist config https://github.com/ai/browserslist

But I am not recommend it. Remember how it was bad when many Western website didn’t work in Opera, because they don’t care about Russian/Belarusian users.

[retyui]

🙏 no, I do not remember)
Then in my life there was no internet 👶.
Is it possible to ignore "Chinese browsers" using api browserslist 🔍?

[ai]

@retyui why you don’t want to keep it? gzip compresses all this extra prefixes.

At least with default browsers nobody will ask you why you have so bad practices in previous work.

[retyui]

Ok not default example:

{
  "name": "ai-🔥",
  "version": "1.0.0",
  "main": "test.js",
  "browserslist": [
    "Chrome >= 35",
    "Firefox >= 38",
    "Edge >= 12",
    "Explorer >= 10",
    "iOS >= 8",
    "Safari >= 8",
    "Android 2.3",
    "Android >= 4",
    "Opera >= 12"
  ],
  "dependencies": {
    "autoprefixer": "^7.1.1",
    "postcss": "^6.0.3"
  }
}

``js // test.js var autoprefixer = require('autoprefixer'); var postcss = require('postcss'); var css =
.example {
box-shadow: 0 0 0 1px red inset;
}
`;
postcss([ autoprefixer(require('./package.json').browserslist) ]).process(css).then(function (result) {
result.warnings().forEach(function (warn) {
console.warn(warn.toString());
});
console.log(result.css);
});

[browserl.ist vizualization](http://browserl.ist/?q=Chrome+%3E%3D+35%2C+Firefox+%3E%3D+38%2C+Edge+%3E%3D+12%2C+Explorer+%3E%3D+10%2C+iOS+%3E%3D+8%2C+Safari+%3E%3D+8%2C+Android+2.3%2C+Android+%3E%3D+4%2C+Opera+%3E%3D+12) does not contain "Chinese browsers" but **Output**:
```css
.example {
    -webkit-box-shadow: 0 0 0 1px red inset;
            box-shadow: 0 0 0 1px red inset;
}

[ai]

You don’t need require('./package.json').browserslist. Just postcss([ autoprefixer() ]).

[ai]

Maybe the best browserslist for you will be:

"browserslist": [
  "> 1% in RU"
]

[retyui]

I do not use this method postcss([ autoprefixer() ]) because the postcss does not say that he used the default or (env. variable || .browserslistrc || package.json) , no notifications 👎

[ai]

What notification do you suggest?

[retyui]

@ai maybe?

$ [postcss info] browserslist: ["> 1% in RU"] from BROWSERSLIST environment (http://browserl.ist/?q=%3E+1%25+in+RU)

[ai]

If you write browerslist in package.json you already knew that Autoprefixer (not PostCSS) will use it.

So it will help only for small group of people (< 0.1%), but will show to 99,9% every day without need.

Other ideas?

[retyui]

I agree by default it is better not to output.
Then how we (<0.1%) can be sure that the browerslist from package.json ?

[ai]

Use console.log(autoprefixer().info())