Respect "browserslist" config (#125)

* respect 'browserslist' config

* fix babel: browsers-->targets.browsers

* add “Custom Config” docs (WIP)

* derp

* derp x2

* 3rd time's the charm

* add autoprefixer link

Author: lukeed

.editorconfig

@@ -7,7 +7,7 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[{*.json,.*rc,*.yml}]
+[{*.json,.*rc,*.yml,*.md}]
 indent_style = space
 indent_size = 2
 

README.md

@@ -14,9 +14,9 @@
 - Monitor your bundle/chunk sizes with built-in tracking
 - Automatic app mounting, debug helpers & Hot Module Replacement
 - In just **4.5kb** you get a productive environment:
-	- [preact]
-	- [preact-router]
-	- 1.5kb of conditionally-loaded polyfills for [fetch](https://github.com/developit/unfetch) & [Promise](https://npm.im/promise-polyfill)
+  - [preact]
+  - [preact-router]
+  - 1.5kb of conditionally-loaded polyfills for [fetch](https://github.com/developit/unfetch) & [Promise](https://npm.im/promise-polyfill)
 
 
 ### Commands
@@ -79,8 +79,8 @@ $ preact serve
 
   --dir       Directory root to serve static files from.          [default: "build"]
   --cwd       The working directory in which to spawn a server.   [default: .]
-  --server    Which server to run, or "config" to produce a firebase config.      	
-  	      [options: "simplehttp2server", "superstatic", "config"] [default:"simplehttp2server"]
+  --server    Which server to run, or "config" to produce a firebase config.        
+          [options: "simplehttp2server", "superstatic", "config"] [default:"simplehttp2server"]
   --dest      Directory or filename where firebase.json should be written
               (used for --server config)                          [default: -]
   --port, -p  Port to start a server on                           [default: "8080"]
@@ -99,6 +99,27 @@ npm run serve -- --server config
 # Copy your static files to a server!
 ```
 
+### Custom Configuration
+
+> **TL;DR** Currently in progress. See [#56](https://github.com/developit/preact-cli/pull/56)
+
+#### 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`](https://github.com/postcss/autoprefixer)) output.
+
+By default, `preact-cli` emulates the following config:
+
+```js
+// package.json
+{
+  "browserslist": [
+    "> 1%", 
+    "IE >= 9",
+    "last 2 versions"
+  ]
+}
+```
+
 
 [preact]: https://github.com/developit/preact
 [preact-router]: https://github.com/developit/preact-router

src/lib/babel-config.js

@@ -3,13 +3,11 @@ export default (env, options={}) => ({
 	presets: [
 		[require.resolve('babel-preset-env'), {
 			loose: true,
-			modules: options.modules || false,
 			uglify: true,
-			browsers: env.browsers ? env.browsers.split() : [
-				'> 1%',
-				'Last 2 versions',
-				'IE >= 9'
-			],
+			modules: options.modules || false,
+			targets: {
+				browsers: options.browsers
+			},
 			exclude: [
 				'transform-regenerator',
 				'transform-es2015-typeof-symbol'

src/lib/webpack-config.js

@@ -53,8 +53,10 @@ export default env => {
 		env.src = '.';
 	}
 
-	env.pkg = readJson(resolve(cwd, 'package.json')) || {};
 	env.manifest = readJson(src('manifest.json')) || {};
+	env.pkg = readJson(resolve(cwd, 'package.json')) || {};
+
+	let browsers = env.pkg.browserslist || ['> 1%', 'last 2 versions', 'IE >= 9'];
 
 	return createConfig.vanilla([
 		setContext(src('.')),
@@ -103,7 +105,7 @@ export default env => {
 						enforce: 'pre',
 						test: /\.jsx?$/,
 						loader: 'babel-loader',
-						options: createBabelConfig(env)
+						options: createBabelConfig(env, { browsers })
 					}
 				]
 			}
@@ -232,9 +234,7 @@ export default env => {
 			new webpack.LoaderOptionsPlugin({
 				options: {
 					postcss: () => [
-						autoprefixer({
-							browsers: ['last 2 versions']
-						})
+						autoprefixer({ browsers })
 					],
 					context: resolve(cwd, env.src || 'src')
 				}