Adds browsers property to use browserslist's queries

[yavorsky]

This PR allows us to use browsers property with query like autoprefixer does.

For example, babelrc:

{
  presets: [
    ["env", {
      "targets": {
        "chrome": 52,
        "browsers": ["safari > 7"]
      },
      "loose": true
    }]
  ]
}

will include chrome 52 and safari 8, 9, 10.

ios_saf, ie11 and others unsupported browsers will be ignored.

[hzoo]

awesome!

If you can make test for this as well with a few cases that would be great

[hzoo]

This will have to be a dependency if we are using it in src

[hzoo]

Although it would be better if it was used as a devDependency

[hzoo]

Do we want to do any validation here? (like in loose/modules we verify if boolean etc)

[hzoo]

Oh I see it's ignored right below

[yavorsky]

I think, browsers defined in targets' root must have higher priority than items we receiving in browsers query.
So,

{
  targets: {
    chrome: 50,
    safari: 10,
    browsers: ['last 2 chrome versions', 'last 2 safari versions'] // chrome 52, safari 9
  }
}

will output {chrome: 50, safari: 10}.

[hzoo]

Yep I think so to, we should update the doc/comment to say that explicit targets will override what's in browsers

[hzoo]

You could also do an early return here

const browserOpts = targetOpts.browsers;
if (isBrowsersQueryValid(browserOpts)) {
  const queryBrowsers = getLowestVersions(browserslist(browserOpts));
  return mergeBrowsers(queryBrowsers, targetOpts);
}
return targetOps;

[hzoo]

Is this necessary?

The code that calls this does

 const targets = getTargets(opts.targets);
isPluginRequired(targets, pluginList[pluginName]));

[yavorsky]

@hzoo It's just for usage from a separate module. When options are not handled yet.

[yavorsky]

I left it in buildPreset to prevent running getTargets method for each item from pluginList

[hzoo]

Ok great, looks good!! 🎉

[chicoxyzzy]

Do we really need possibility to mention browsers directly in targets? AFAIK browserlist can handle this.

Result of

{
  targets: {
    chrome: 50,
    safari: 10,
    browsers: ['last 2 chrome versions', 'last 2 safari versions']
  }
}

is equal to result of

{
  targets: {
    browsers: ['chrome 50', 'safari 10']
  }
}

Example: http://browserl.ist/?q=last+2+versions%2C+not+ie+%3C+11%2C+chrome+5
Do we need this only for Node.js?

[hzoo]

I guess it depends on what browserlist supports compared to the compat-table - yeah node?

[ianwremmel]

It looks like autoprefixer is now recommending a browserlist file in the project root rather than configure tools directly. Does this support that?

[hzoo]

Nope it's just a string atm - there #26 open though!

[ianwremmel]

gotcha. thanks @hzoo!