Create a browsers configuration ✍️

It is better to have all the config inside the `sagui.config.js` file.

README.md

@@ -214,6 +214,30 @@ module.exports = {
 }
 ```
 
+### `browsers`
+
+List of browsers using the [browserslist format](https://github.com/ai/browserslist) that the target build must support.
+
+```js
+// sagui.config.js
+module.exports = {
+  browsers: [
+    '> 1%',
+    'last 2 versions',
+    'IE 10'
+  ]
+}
+```
+
+If not provided, the above default will be used instead.
+
+This information is used to decide:
+
+- JavaScript language features to transpile;
+- CSS prefixes to append.
+
+Internally Sagui uses [babel-preset-env](https://github.com/babel/babel-preset-env) and [autoprefixer](https://github.com/postcss/autoprefixer).
+
 ### `style.cssModules`
 
 By default, styles compiled with Sagui will be output as [CSS Modules](https://github.com/css-modules), meaning they won't be global.

spec/integration/index.integration-spec.js

@@ -56,15 +56,6 @@ describe('[integration] sagui', function () {
       return sagui({ projectPath, action: actions.TEST_UNIT, coverage: true })
     })
 
-    it('should have the browserslist configuration in package.json', () => {
-      const packageJSON = JSON.parse(fs.readFileSync(path.join(projectPath, 'package.json')))
-      expect(packageJSON.browserslist).to.eql([
-        '> 1%',
-        'Last 2 versions',
-        'IE 10'
-      ])
-    })
-
     it('should have an .gitignore, .flowconfig and .editorconfig file', () => {
       fs.readFileSync(path.join(projectPath, '.gitignore'))
       fs.readFileSync(path.join(projectPath, '.flowconfig'))

src/configure-webpack/loaders/javascript.js

@@ -6,7 +6,7 @@ import actions from '../../actions'
 
 export default {
   name: 'javaScript',
-  configure ({ action, projectPath, javaScript = {}, coverage }) {
+  configure ({ action, projectPath, javaScript = {}, coverage, browsers }) {
     return {
       plugins: [
         new HappyPack({
@@ -33,7 +33,9 @@ export default {
                     // Unfortunately we are bound to what UglifyJS
                     // currently supports as language features
                     // https://github.com/babel/babel-preset-env#targetsuglify
-                    uglify: true
+                    uglify: true,
+
+                    browsers
                   }
                 }],
                 require.resolve('babel-preset-flow'),

src/configure-webpack/loaders/style.js

@@ -20,7 +20,7 @@ const defaultConfig = {
  */
 export default {
   name: 'style',
-  configure ({ action, optimize, pages = [], projectPath, style = {} }) {
+  configure ({ action, optimize, pages = [], projectPath, style = {}, browsers }) {
     // Use null-loader during tests
     // for better performance
     if (action === actions.TEST_UNIT) {
@@ -96,7 +96,7 @@ export default {
           options: {
             postcss: {
               plugins: () => [
-                autoprefixer,
+                autoprefixer({ browsers }),
 
                 // allow importing values (variables) between css modules
                 // see: https://github.com/css-modules/postcss-modules-values#usage

src/index.js

@@ -10,6 +10,11 @@ export { MissingPackageJSON, SaguiPath, InvalidSaguiConfig } from './load-projec
 
 const DEFAULT_SAGUI_CONFIG = {
   port: 3000,
+  browsers: [
+    '> 1%',
+    'Last 2 versions',
+    'IE 10'
+  ],
   saguiPath: path.join(__dirname, '../'),
   optimize: false,
   coverage: false,

src/load-project-sagui-config.spec.js

@@ -66,6 +66,12 @@ describe('load-project-sagui-config', () => {
       })
     })
 
+    it('browsers', () => {
+      validateConfig({
+        browsers: ['> 1%']
+      })
+    })
+
     it('develop.proxy', () => {
       validateConfig({
         develop: {

src/run/install/package-json.js

@@ -8,11 +8,6 @@ export default function (projectPath) {
 
   json.write(packagePath, {
     ...packageJSON,
-    scripts: updateNpmScripts(packageJSON.scripts),
-    browserslist: packageJSON.browserslist || [
-      '> 1%',
-      'Last 2 versions',
-      'IE 10'
-    ]
+    scripts: updateNpmScripts(packageJSON.scripts)
   })
 }

src/sagui-config-schema.json

@@ -9,6 +9,10 @@
       "description": "https://github.com/saguijs/sagui#additionalwebpackconfig",
       "type": "object"
     },
+    "browsers": {
+      "description": "https://github.com/saguijs/sagui#browsers",
+      "type": "array"
+    },
     "develop": {
       "description": "https://github.com/saguijs/sagui#developproxy",
       "type": "object"