question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Regression from 6.x -> 7.x: info() not picking up browserlist configuration

See original GitHub issue

Hi,

At first this looked like a more serious issue than it turned out to be after investigation, but thought to report this anyway. Makes debugging difficult at least, spent a good while thinking my browserslist config isn’t being picked up at all.

To clarify: the actual functionality seems to work fine when used as per design via postcss.

Short version: In 7.x, autoprefixer().info() with no arguments uses the default browserslist configuration instead of picking up the config from package.json or from the configuration file.

To reproduce:

In package.json (or in a separate configuration file), have something custom defined:

  "browserslist": [
    "Edge 15"
  ]

Then, run the following code and compare the output between latest 6.x and 7.x versions.

var autoprefixer = require('autoprefixer');

console.log(autoprefixer().info());

On the last 6.x release (6.7.7), the output is as predicted:

$ node index.js
Browsers:
  Edge: 15

These browsers account for 0% of all users globally

At-Rules:
  @viewport: ms

Selectors:
  ::placeholder: ms

Properties:
  user-select: ms
  hyphens: ms
  // ....and so on

Values:
  grid: ms
  inline-grid: ms

On 7.0.1 the output shows that browserslist defaults are being used:

$ node index.js
Browsers:
  Chrome for Android: 57
  Firefox for Android: 52
  And_qq: 1.2
  UC for Android: 11.4
  Android: 56, 4.4.3-4.4.4, 4.4
  Baidu: 7.12
  Bb: 10, 7
  Chrome: 58, 57, 56, 49
  Edge: 15, 14
  Firefox: 53, 52
  IE: 11, 10
  IE Mobile: 11, 10
  iOS: 10.3, 10.0-10.2
  Opera Mini: all
  Opera Mobile: 37, 12.1
  Opera: 44, 43
  Safari: 10.1, 10
  Samsung: 4

These browsers account for 90.92% of all users globally

At-Rules:
  @keyframes: webkit
  @viewport: ms, o
  @resolution: webkit

Selectors:
  ::selection: moz
  ::placeholder: webkit, ms
  :fullscreen: webkit, moz, ms
  ::backdrop: webkit
  :read-only: moz
  :read-write: moz
  :any-link: webkit, moz

Properties:
  box-shadow: webkit
  animation: webkit
  animation-name: webkit
  animation-duration: webkit
  animation-delay: webkit
  animation-direction: webkit
  // ...and so on

If calling the .info() with explicit from option (autoprefixer().info({ from: '.' })), things work in 7.x as well.

As far as I figured out, the issue seems to come from the fact that path option given to browserslist is undefined, but browserslist falls back to the default path (.) only if the path prop is missing completely.

Another thing I noticed with .info() is that, even if called for an autoprefixer plugin instance, it doesn’t use the options of that instance, but rather always the given opts (ref). I feel this is a bit unintuitive as the function is meant for debugging purposes - I’d assume it to show me the exact same configuration as used by the created instance.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:17 (10 by maintainers)

github_iconTop GitHub Comments

1reaction
aicommented, May 15, 2017

Released in 7.1

0reactions
11bitcommented, May 31, 2017

@zslabs yep, you are right. It was changed in Browserslist 2.0 (part of Autoprefixer 7.x release). Before that ‘last n browsers’ was actually ‘last n popular’ but now it adds prefixes for all browsers including uncommon ones like Blackberry. There is more info here: https://github.com/ai/browserslist/issues/98

Read more comments on GitHub >

github_iconTop Results From Across the Web

Change last n version scheme to include all browsers ... - GitHub
11bit mentioned this issue on May 31, 2017. Regression from 6.x -> 7.x: info() not picking up browserlist configuration postcss/autoprefixer#838.
Read more >
Babel with babel-preset-env seems to ignore browserslist config
I'm not using a .babelrc file or any other configuration of Babel. I've tried to target Edge 16 using the browserslist key: "browserslist":...
Read more >
Speed up with Browserslist - DEV Community 👩‍💻👨‍💻
By default, if there is no config in the project, Browserslist will use default browsers. This query is an alias for > 0.5%,...
Read more >
Changelog | Finsemble
Changelog. Links to previous versions of the documentation (3.7 and later) can be found under each version's header. For info about upgrading, see...
Read more >
browserslist - npm
The config to share target browsers and Node.js versions between different front-end tools. It is used in: Autoprefixer · Babel · postcss-preset ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found