Respect "browserslist" config #125

lukeed · 2017-06-20T17:58:49Z

I never saw a way to write to env.browsers (within babel config) aside from a CLI string, which is very error prone as it passes thru the split().

This will share a browsers config across Babel and Autoprefixer. I don't believe there are any other configs...?

Lastly, "upgrades" the default Autoprefixer from 'last 2 versions' to what Babel was specifying.

Closes #124

rkostrzewski · 2017-06-20T21:14:28Z

src/lib/babel-config.js

@@ -4,12 +4,8 @@ export default (env, options={}) => ({
 		[require.resolve('babel-preset-env'), {
 			loose: true,
 			modules: options.modules || false,
+			browsers: options.browsers,


❤️ options.browsers - babel-config.js will be still usable as a babel preset!

However it should be: target: { browsers: [...] } like here (I've wanted to check what this does - I still don't know, but at least I've noticed it is passed differently 😛 )

Oh yeah, nice catch! Looks like that should have always been target.browsers 👍

Sorry, I'm confused by your first sentence. Not sure what you mean.

Just that I really dig that you pass browsers via options 😛 . That means I'll still be able to us babel-config.js as a babel preset in #56 and use it like so: presets: [path.resolve(..., 'babel-config.js', { browsers: ... } ]

Oh, haha, great!

I'm thinking now, to answer my own question (below), that I need to respect any "babel" config inside the package.json.

With #56, how will users customize their babel options? I should account for that too.

Via .babelrc or package.json (or even by changing webpack babel-loader query). I don't think you have to worry about that at all because babel is so smart that it extends over this configuration, i.e. a .babelrcthat looks like this { plugins: ["my-awesome-plugin"] } will get everything applied from this file + 'my-awesome-plugin'.

In case of collisions stuff from .babelrc takes precedence over our internal settings (don't remember if options were merged tough, e.g. when env preset was declared stuff like loose: true was preserved or in this case browsers would be preserved)

rkostrzewski · 2017-06-20T21:53:11Z

I think this should be described it in a readme or some other form of docs.

lukeed · 2017-06-20T22:29:51Z

I'll add a README note as part of this PR.

Question: How do we want to allow devs to specify Babel targets? See full usage.

Follow up questions here: #124 (comment)

rkostrzewski · 2017-06-20T23:00:16Z

README.md

+
+#### Browserlist
+
+You may customize your list of supported browser versions by declaring a [`"browerslist"`](https://github.com/ai/browserslist) key within your `package.json`. Changing these values will modify your JavaScript (via [`babel-preset-env`](https://github.com/babel/babel-preset-env#targetsbrowsers)) and your CSS (via [`autoprefixer`]()) output.


browerslist -> browserslist

//facepalm 😅

You're on a roll! broswerslist 🤣

lukeed · 2017-06-20T23:07:03Z

Confession: I hate typing the word "browser" -- even though I know how to spell it, it rarely comes out right & typos blend in. Good thing I'm a front-end dev, eh?

rkostrzewski · 2017-06-20T23:08:39Z

README.md

+
+#### Browserslist
+
+You may customize your list of supported browser versions by declaring a [`"browserslist"`](https://github.com/ai/browserslist) key within your `package.json`. Changing these values will modify your JavaScript (via [`babel-preset-env`](https://github.com/babel/babel-preset-env#targetsbrowsers)) and your CSS (via [`autoprefixer`]()) output.


Minor: missing link to autoprefixer 😄

lukeed · 2017-06-20T23:12:14Z

Thanks @rkostrzewski 😆

Pinging @developit for quick sign-off on README changes

developit

Awesome.

developit · 2017-06-21T14:13:53Z

.editorconfig

@@ -7,7 +7,7 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true

-[{*.json,.*rc,*.yml}]
+[{*.json,.*rc,*.yml,*.md}]


weird this wasn't already in here

lukeed · 2017-06-23T21:13:15Z

Is this ready to make its way in?

developit · 2017-06-23T21:22:22Z

IMO yes. and @rkostrzewski reviewed previously but our settings killed it. merging.

respect 'browserslist' config

9cfbab5

lukeed requested a review from rkostrzewski June 20, 2017 18:43

rkostrzewski requested changes Jun 20, 2017

View reviewed changes

fix babel: browsers-->targets.browsers

834f804

rkostrzewski previously approved these changes Jun 20, 2017

View reviewed changes

add “Custom Config” docs (WIP)

bb610e7

lukeed dismissed rkostrzewski’s stale review via bb610e7 June 20, 2017 22:58

rkostrzewski reviewed Jun 20, 2017

View reviewed changes

lukeed added 3 commits June 20, 2017 16:01

derp

a83305a

derp x2

ff203b0

3rd time's the charm

023a09f

rkostrzewski previously approved these changes Jun 20, 2017

View reviewed changes

rkostrzewski reviewed Jun 20, 2017

View reviewed changes

add autoprefixer link

917d769

lukeed dismissed rkostrzewski’s stale review via 917d769 June 20, 2017 23:09

developit approved these changes Jun 21, 2017

View reviewed changes

developit added this to the 1.2.0 milestone Jun 21, 2017

developit merged commit 8db82b6 into master Jun 23, 2017

lukeed deleted the browserlist branch June 23, 2017 21:25

jonathantneal mentioned this pull request Jul 8, 2019

Respect browserslist configurations #829

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Respect "browserslist" config #125

Respect "browserslist" config #125

lukeed commented Jun 20, 2017

rkostrzewski Jun 20, 2017

lukeed Jun 20, 2017

rkostrzewski Jun 20, 2017

lukeed Jun 20, 2017

rkostrzewski Jun 20, 2017

rkostrzewski commented Jun 20, 2017

lukeed commented Jun 20, 2017

rkostrzewski Jun 20, 2017

lukeed Jun 20, 2017

rkostrzewski Jun 20, 2017

lukeed commented Jun 20, 2017

rkostrzewski Jun 20, 2017

lukeed Jun 20, 2017

lukeed commented Jun 20, 2017

developit left a comment

developit Jun 21, 2017

lukeed commented Jun 23, 2017

developit commented Jun 23, 2017


		#### Browserlist

		You may customize your list of supported browser versions by declaring a [`"browerslist"`](https://github.com/ai/browserslist) key within your `package.json`. Changing these values will modify your JavaScript (via [`babel-preset-env`](https://github.com/babel/babel-preset-env#targetsbrowsers)) and your CSS (via [`autoprefixer`]()) output.


		#### Browserslist

		You may customize your list of supported browser versions by declaring a [`"browserslist"`](https://github.com/ai/browserslist) key within your `package.json`. Changing these values will modify your JavaScript (via [`babel-preset-env`](https://github.com/babel/babel-preset-env#targetsbrowsers)) and your CSS (via [`autoprefixer`]()) output.

Respect "browserslist" config #125

Respect "browserslist" config #125

Conversation

lukeed commented Jun 20, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rkostrzewski commented Jun 20, 2017

lukeed commented Jun 20, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lukeed commented Jun 20, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lukeed commented Jun 20, 2017

developit left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lukeed commented Jun 23, 2017

developit commented Jun 23, 2017