Adds `browsers` property to use browserslist's queries #19

Merged
merged 12 commits into from Oct 13, 2016

Projects

None yet

4 participants

@yavorsky
Collaborator
yavorsky commented Oct 7, 2016 edited

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.

@yavorsky yavorsky changed the title from Adds browsers property to use browserslist to Adds `browsers` property to use browserslist's queries Oct 7, 2016
@hzoo
Member
hzoo commented Oct 7, 2016 edited

awesome!

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

package.json
@@ -52,6 +52,7 @@
"babel-plugin-transform-flow-strip-types": "^6.8.0",
"babel-preset-es2015": "^6.14.0",
"babel-register": "^6.14.0",
+ "browserslist": "^1.4.0",
@hzoo
hzoo Oct 7, 2016 Member

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

@hzoo
hzoo Oct 7, 2016 Member

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

src/index.js
@@ -62,7 +63,16 @@ export const isPluginRequired = (supportedEnvironments, plugin) => {
};
const getTargets = targetOpts => {
- return targetOpts || {};
+ const mergedOpts = targetOpts || {};
+ const browserOpts = targetOpts['browsers'];
@hzoo
hzoo Oct 7, 2016 Member

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

@hzoo
hzoo Oct 7, 2016 Member

Oh I see it's ignored right below

@yavorsky
Collaborator
yavorsky commented Oct 8, 2016

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
Member
hzoo commented Oct 8, 2016

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

src/index.js
+ } else {
+ mergedOpts = targetOpts;
+ }
+ return mergedOpts;
@hzoo
hzoo Oct 8, 2016 edited Member

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;
@@ -39,6 +40,10 @@ export const MODULE_TRANSFORMATIONS = {
* @return {Boolean} Whether or not the transformation is required
*/
export const isPluginRequired = (supportedEnvironments, plugin) => {
+ if (supportedEnvironments.browsers) {
@hzoo
hzoo Oct 13, 2016 Member

Is this necessary?

The code that calls this does

 const targets = getTargets(opts.targets);
isPluginRequired(targets, pluginList[pluginName]));
@yavorsky
yavorsky Oct 13, 2016 Collaborator

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

@yavorsky
yavorsky Oct 13, 2016 Collaborator

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

@hzoo hzoo merged commit d3d63e8 into babel:master Oct 13, 2016

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@hzoo
Member
hzoo commented Oct 13, 2016

Ok great, looks good!! 🎉

@hzoo hzoo added the enhancement label Oct 13, 2016
@chicoxyzzy
Collaborator
chicoxyzzy commented Nov 2, 2016 edited

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
Member
hzoo commented Nov 2, 2016

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
Member
hzoo commented Nov 5, 2016

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

@ianwremmel

gotcha. thanks @hzoo!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment