Allow multiple browserlist environments

[iFarmGolems]

Hey, not sure if feature is present or not but I don't see anything in documentation about multiple browserlist environments

Would it be possible to add support for this / is it present somehow ?

Thanks.

[amilajack]

I think we do support multiple environments but I'll have to check. Are there any issues you're running into because of this?

[semiaddict]

Hi,
I also needed support for multiple browserlist environments.
I am using Babel with Webpack 5 with multiple webpack configs to target different browsers per entry (part of the code needs to run on legacy browsers, while another part only needs to run on modern browsers).

It took me a while to figure out how to specify a different browserslist environment for each config, and ended up with something along the lines of:

const browserslist = require('browserslist');
const env = 'legacy'; // The browserslist environment id
const browsers = browserslist.findConfig('./')[env]; // Loads the browserslist environment

.....
new ESLintPlugin({
  failOnError: false,
  overrideConfig: {
    rules: {
      "compat/compat": ["error", browsers.join(",")],
    }
  }
})
.....

This seems to work fine. So it might be helpful to document the fact that the plugin can take a string browserslist config as an option to the eslint rule.

[frehner]

I believe this line creates the options for browserslist and then is passed to browserslist() here later, so it appears that currently there isn't an easy way to set the env for browserslist, so it defaults to production.

That helper gets called from the rule here.

@amilajack Would you be open to me creating a new PR adding something like settings.browserslistOpts to your eslint config, and then reading it in and passing it to that function?

[amilajack]

Thanks for outlining that. A pr would be great!

[muuvmuuv]

Stumbled on this as well. We have two sets, but I don't get reports for Array.prototype.at (which is only available upon Chrome Android 92):

  "browserslist": {
    "production": [
      "last 10 Chrome versions",
      "last 20 ChromeAndroid versions",
      "last 5 Safari versions",
      "last 3 iOS versions",
      "last 10 Firefox versions",
      "last 10 FirefoxAndroid versions",
      "last 5 Edge versions",
      "Firefox ESR",
      "not dead",
      "> 10% in DE"
    ],
    "mobile": [
      "iOS >= 13",
      "Android >= 9",
      "Chrome >= 66"
    ]
  },

Would be great if it would respect both or if I could define which I prefer during development.