* replace autoprefixer-loader by postcss-loader with cssnext (closes #260)

* use 'options' instead of 'query' in webpack config
* move service-worker.js to dist directory

Author: bertho-zero

.bootstraprc

@@ -5,11 +5,21 @@
   "loglevel": "disabled",
   "env": {
     "development": {
-      "styleLoaders": ["style-loader", "css-loader", "resolve-url-loader", "sass-loader"],
+      "styleLoaders": [
+        "style-loader?sourceMap",
+        "css-loader?sourceMap&importLoaders=2",
+        "resolve-url-loader",
+        "sass-loader?sourceMap"
+      ],
       "extractStyles": false
     },
     "production": {
-      "styleLoaders": ["style-loader", "css-loader", "resolve-url-loader", "sass-loader"],
+      "styleLoaders": [
+        "style-loader",
+        "css-loader?importLoaders=2",
+        "resolve-url-loader",
+        "sass-loader?sourceMap"
+      ],
       "extractStyles": true
     }
   },

.dockerignore

@@ -3,7 +3,6 @@
 node_modules/
 yarn.lock
 static/dist/
-static/service-worker.js
 *.iml
 webpack-assets.json
 webpack-stats.json

.gitignore

@@ -2,7 +2,6 @@
 node_modules/
 yarn.lock
 static/dist/
-static/service-worker.js
 *.iml
 webpack-assets.json
 webpack-stats.json

package.json

@@ -160,7 +160,6 @@
     "superagent": "^3.4.4"
   },
   "devDependencies": {
-    "autoprefixer-loader": "^3.2.0",
     "babel-eslint": "^7.1.1",
     "babel-jest": "^20.0.1",
     "babel-loader": "^7.0.0",
@@ -171,6 +170,7 @@
     "clean-webpack-plugin": "^0.1.15",
     "concurrently": "^3.3.0",
     "css-loader": "^0.28.0",
+    "cssnext": "^1.8.4",
     "eslint": "^3.15.0",
     "eslint-config-airbnb": "^15.0.0",
     "eslint-loader": "^1.6.1",
@@ -200,6 +200,8 @@
     "phantomjs-polyfill": "^0.0.2",
     "phantomjs-prebuilt": "^2.1.14",
     "piping": "^1.0.0-rc.4",
+    "postcss-import": "^10.0.0",
+    "postcss-loader": "^2.0.5",
     "react-a11y": "^0.3.3",
     "react-addons-test-utils": "^15.4.2",
     "react-hot-loader": "^3.0.0-beta.3",
@@ -210,7 +212,6 @@
     "resolve-url-loader": "^2.0.0",
     "sass-loader": "^6.0.1",
     "sinon": "^2.1.0",
-    "strip-loader": "^0.1.2",
     "style-loader": "^0.17.0",
     "sw-precache-webpack-plugin": "^0.11.0",
     "timekeeper": "^1.0.0",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = ({ file, options }) => ({
+  plugins: [
+    require('postcss-import')({ root: file.dirname }),
+    require('cssnext')(options.cssnext ? options.cssnext : false)
+  ]
+});

src/client.js

@@ -112,7 +112,7 @@ Promise.all([window.__data ? true : isOnline(), getStoredState(offlinePersistCon
     }
 
     if (online && !__DEVELOPMENT__ && 'serviceWorker' in navigator) {
-      navigator.serviceWorker.register('/service-worker.js', { scope: '/' })
+      navigator.serviceWorker.register('/dist/service-worker.js', { scope: '/' })
         .then(() => {
           console.log('Service worker registered!');
         })

src/server.js

@@ -36,10 +36,14 @@ app.use(compression());
 app.use(favicon(path.join(__dirname, '..', 'static', 'favicon.ico')));
 app.get('/manifest.json', (req, res) => res.sendFile(path.join(__dirname, '..', 'static', 'manifest.json')));
 
+app.use('/dist/service-worker.js', (req, res, next) => {
+  res.setHeader('Service-Worker-Allowed', '/');
+  return next();
+});
+
 app.use(express.static(path.join(__dirname, '..', 'static')));
 
 app.use((req, res, next) => {
-  res.setHeader('Service-Worker-Allowed', '*');
   res.setHeader('X-Forwarded-For', req.ip);
   return next();
 });

webpack/dev.config.js

@@ -125,41 +125,50 @@ var webpackConfig = module.exports = {
   plugins: [
     // hot reload
     new webpack.HotModuleReplacementPlugin(),
+
     new webpack.IgnorePlugin(/webpack-stats\.json$/),
+
     new webpack.DefinePlugin({
       __CLIENT__: true,
       __SERVER__: false,
       __DEVELOPMENT__: true,
       __DEVTOOLS__: true  // <-------- DISABLE redux-devtools HERE
     }),
+
     webpackIsomorphicToolsPlugin.development(),
 
     helpers.createHappyPlugin('jsx', [
       {
         loader: 'react-hot-loader/webpack'
       }, {
         loader: 'babel-loader',
-        query: babelLoaderQuery
+        options: babelLoaderQuery
       }, {
         loader: 'eslint-loader',
         options: { emitWarning: true }
       }
     ]),
     helpers.createHappyPlugin('less', [
       {
-        loader: 'style-loader'
+        loader: 'style-loader',
+        options: { sourceMap: true }
       }, {
         loader: 'css-loader',
-        query: {
+        options: {
           modules: true,
           importLoaders: 3,
           sourceMap: true,
           localIdentName: '[local]___[hash:base64:5]'
         }
       }, {
-        loader: 'autoprefixer-loader',
-        query: {
-          browser: 'last 2 version'
+        loader: 'postcss-loader',
+        options: {
+          sourceMap: true,
+          ctx: {
+            cssnext: {
+              browsers: 'last 2 version'
+            }
+          }
         }
       }, {
         loader: 'resolve-url-loader',
@@ -173,25 +182,31 @@ var webpackConfig = module.exports = {
     ]),
     helpers.createHappyPlugin('sass', [
       {
-        loader: 'style-loader'
+        loader: 'style-loader',
+        options: { sourceMap: true }
       }, {
         loader: 'css-loader',
-        query: {
+        options: {
           modules: true,
           importLoaders: 3,
           sourceMap: true,
           localIdentName: '[local]___[hash:base64:5]'
         }
       }, {
-        loader: 'autoprefixer-loader',
-        query: {
-          browsers: 'last 2 version'
+        loader: 'postcss-loader',
+        options: {
+          sourceMap: true,
+          ctx: {
+            cssnext: {
+              browsers: 'last 2 version'
+            }
+          }
         }
       }, {
         loader: 'resolve-url-loader',
       }, {
         loader: 'sass-loader',
-        query: {
+        options: {
           outputStyle: 'expanded',
           sourceMap: true
         }

webpack/prod.config.js

@@ -5,7 +5,6 @@ var path = require('path');
 var webpack = require('webpack');
 var CleanPlugin = require('clean-webpack-plugin');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var strip = require('strip-loader');
 
 var projectRootPath = path.resolve(__dirname, '../');
 var assetsPath = path.resolve(projectRootPath, './static/dist');
@@ -40,14 +39,7 @@ module.exports = {
     rules: [
       {
         test: /\.jsx?$/,
-        use: [{
-          loader: 'strip-loader',
-          options: {
-            strip: ['debug']
-          }
-        }, {
-          loader: 'babel-loader'
-        }],
+        loader: 'babel-loader',
         exclude: /node_modules/
       }, {
         test: /\.less$/,
@@ -56,21 +48,26 @@ module.exports = {
           use: [
             {
               loader: 'css-loader',
-              query: {
+              options: {
                 modules: true,
                 importLoaders: 3,
                 sourceMap: true
               }
             }, {
-              loader: 'autoprefixer-loader',
-              query: {
-                browsers: 'last 2 version'
+              loader: 'postcss-loader',
+              options: {
+                sourceMap: true,
+                ctx: {
+                  cssnext: {
+                    browsers: 'last 2 version'
+                  }
+                }
               }
             }, {
               loader: 'resolve-url-loader',
             }, {
               loader: 'less-loader',
-              query: {
+              options: {
                 outputStyle: 'expanded',
                 sourceMap: true,
                 sourceMapContents: true
@@ -85,21 +82,26 @@ module.exports = {
           use: [
             {
               loader: 'css-loader',
-              query: {
+              options: {
                 modules: true,
                 importLoaders: 3,
                 sourceMap: true
               }
             }, {
-              loader: 'autoprefixer-loader',
-              query: {
-                browsers: 'last 2 version'
+              loader: 'postcss-loader',
+              options: {
+                sourceMap: true,
+                ctx: {
+                  cssnext: {
+                    browsers: 'last 2 version'
+                  }
+                }
               }
             }, {
               loader: 'resolve-url-loader',
             }, {
               loader: 'sass-loader',
-              query: {
+              options: {
                 outputStyle: 'expanded',
                 sourceMap: true,
                 sourceMapContents: true
@@ -148,14 +150,15 @@ module.exports = {
     extensions: ['.json', '.js', '.jsx']
   },
   plugins: [
-    new CleanPlugin([assetsPath, 'static/service-worker.js'], { root: projectRootPath }),
+    new CleanPlugin([assetsPath], { root: projectRootPath }),
 
     // css files from the extract-text-plugin loader
     new ExtractTextPlugin({
       filename: '[name]-[chunkhash].css',
       // disable: false,
       allChunks: true
     }),
+
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"production"',
 
@@ -185,7 +188,7 @@ module.exports = {
 
     new SWPrecacheWebpackPlugin({
       cacheId: 'react-redux-universal-hot-example',
-      filename: '../service-worker.js',
+      filename: 'service-worker.js',
       maximumFileSizeToCacheInBytes: 8388608,
 
       // Ensure all our static, local assets are cached.