plugged browserslist into babel-env

Author: spacerockzero

README.md

@@ -29,9 +29,10 @@ firebase serve
 ```
 
 - That will build it all and watch the css, img, and js assets.
-- Then you can load up `http://localhost:5000` in a browser. narf!
+- Then you can load up `http://localhost:5000` or `public/index.html` in a browser. narf!
 `/src/index.js` is the main file you'll want to edit for functionality.
 - If you have the [LiveReload Chrome extension](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) installed, it should do live css updates in your browser while gulp watch is running
+- CSS is auto-prefixed for the supported browserslist, so don't manually add any browser prefixes to CSS src.
 - NOTE: If you change the UI, please update the screenshot at top of this README
 
 ## How To Add New Problems
@@ -55,3 +56,6 @@ Each test must have:
 This test function will be run on code submission, and MUST return boolean. `output` param is available.
 `output` is the output of the JavaScript evaluation of the user's code submission.
 This test function may make chai.js assertions or any other comparison against the `output` value.
+
+## Browser support
+- See `browserslist` settings in package.json

gulpfile.js

@@ -1,3 +1,6 @@
+// DEPS
+// ============================================================
+
 const gulp = require('gulp');
 const sourcemaps = require('gulp-sourcemaps');
 const browserify = require('browserify');
@@ -13,6 +16,10 @@ const svgo = require('gulp-svgo');
 const sass = require('gulp-sass');
 const livereload = require('gulp-livereload');
 
+// CONFIG
+// ============================================================
+const browserslist = require('./package.json').browserslist;
+
 const opts = {
   builtins: false,
   entries: ['src/js/index.js'],
@@ -24,9 +31,18 @@ const opts = {
 
 const uglifyConf = {};
 
+// TASKS
+// ============================================================
+
 function compile(watch) {
   const bundler = watchify(browserify(opts).transform(babel.configure({
-    presets: ['env']
+    presets: [
+      ['env', {
+        targets: {
+          browsers: browserslist
+        }
+      }]
+    ]
   })));
   function rebundle() {
     return bundler.bundle()
@@ -62,7 +78,7 @@ function watch() {
 
 gulp.task('css', () => {
   const plugins = [
-    autoprefixer({browsers: ['last 1 version']}),
+    autoprefixer({browsers: browserslist}),
     cssnano()
   ];
   return gulp.src('./src/css/style.scss')

package.json

@@ -13,6 +13,10 @@
     "precommit": "yarn test",
     "prepush": "yarn test"
   },
+  "browserslist": [
+    "> 1%",
+    "last 1 versions"
+  ],
   "xo": {
     "env": [
       "node",