* use postcss-cssnext instead of directly cssnext

* use postcss-url instead of resolve-url-loader
* fix karma configuration for postcss
* add package-lock.json to ignore files (try npm5)

Author: bertho-zero

.bootstraprc

@@ -8,7 +8,6 @@
       "styleLoaders": [
         "style-loader?sourceMap",
         "css-loader?sourceMap&importLoaders=2",
-        "resolve-url-loader",
         "sass-loader?sourceMap"
       ],
       "extractStyles": false
@@ -17,7 +16,6 @@
       "styleLoaders": [
         "style-loader",
         "css-loader?importLoaders=2",
-        "resolve-url-loader",
         "sass-loader?sourceMap"
       ],
       "extractStyles": true

.dockerignore

@@ -2,6 +2,7 @@
 .idea/
 node_modules/
 yarn.lock
+package-lock.json
 static/dist/
 *.iml
 webpack-assets.json

.gitignore

@@ -1,6 +1,7 @@
 .idea/
 node_modules/
 yarn.lock
+package-lock.json
 static/dist/
 *.iml
 webpack-assets.json

karma.conf.js

@@ -39,10 +39,13 @@ module.exports = function (config) {
         rules: [
           { test: /\.(jpe?g|png|gif|svg)$/, loader: 'url', options: { limit: 10240 } },
           { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
-          { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
+          {
+            test: /\.less$/,
+            loader: 'style-loader!css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!postcss-loader!less-loader?outputStyle=expanded&sourceMap'
+          },
           {
             test: /\.scss$/,
-            loader: 'style-loader!css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer-loader?browsers=last 2 version!sass-loader?outputStyle=expanded&sourceMap'
+            loader: 'style-loader!css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!postcss-loader!sass-loader?outputStyle=expanded&sourceMap'
           }
         ]
       },
@@ -53,14 +56,32 @@ module.exports = function (config) {
         ]
       },
       plugins: [
+        new webpack.LoaderOptionsPlugin({
+          test: /\.(less|scss)/,
+          options: {
+            postcss: function (webpack) {
+              return [
+                require("postcss-import")({ addDependencyTo: webpack }),
+                require("postcss-url")(),
+                require("postcss-cssnext")({ browsers: 'last 2 version' }),
+                // add your "plugins" here
+                // ...
+                // and if you want to compress,
+                // just use css-loader option that already use cssnano under the hood
+                require("postcss-browser-reporter")(),
+                require("postcss-reporter")(),
+              ]
+            }
+          }
+        }),
         new webpack.IgnorePlugin(/\.json$/),
         new webpack.NoEmitOnErrorsPlugin(),
         new webpack.DefinePlugin({
           __CLIENT__: true,
           __SERVER__: false,
           __DEVELOPMENT__: true,
           __DEVTOOLS__: false,  // <-------- DISABLE redux-devtools HERE
-          __DLLS__: process.env.WEBPACK_DLLS === '1'
+          __DLLS__: false
         })
       ]
     },

package.json

@@ -170,7 +170,6 @@
     "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,16 +199,20 @@
     "phantomjs-polyfill": "^0.0.2",
     "phantomjs-prebuilt": "^2.1.14",
     "piping": "^1.0.0-rc.4",
+    "postcss": "^6.0.1",
+    "postcss-browser-reporter": "^0.5.0",
+    "postcss-cssnext": "^2.11.0",
     "postcss-import": "^10.0.0",
     "postcss-loader": "^2.0.5",
+    "postcss-reporter": "^3.0.0",
+    "postcss-url": "^6.1.0",
     "react-a11y": "^0.3.3",
     "react-addons-test-utils": "^15.4.2",
     "react-hot-loader": "^3.0.0-beta.3",
     "react-to-html-webpack-plugin": "^2.2.0",
     "redux-devtools": "^3.3.2",
     "redux-devtools-dock-monitor": "^1.1.1",
     "redux-devtools-log-monitor": "^1.2.0",
-    "resolve-url-loader": "^2.0.0",
     "sass-loader": "^6.0.1",
     "sinon": "^2.1.0",
     "style-loader": "^0.17.0",

postcss.config.js

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

webpack/dev.config.js

@@ -123,6 +123,25 @@ var webpackConfig = module.exports = {
     extensions: ['.json', '.js', '.jsx']
   },
   plugins: [
+    new webpack.LoaderOptionsPlugin({
+      test: /\.(less|scss)/,
+      options: {
+        postcss: function (webpack) {
+          return [
+            require("postcss-import")({ addDependencyTo: webpack }),
+            require("postcss-url")(),
+            require("postcss-cssnext")({ browsers: 'last 2 version' }),
+            // add your "plugins" here
+            // ...
+            // and if you want to compress,
+            // just use css-loader option that already use cssnano under the hood
+            require("postcss-browser-reporter")(),
+            require("postcss-reporter")(),
+          ]
+        }
+      }
+    }),
+
     // hot reload
     new webpack.HotModuleReplacementPlugin(),
 
@@ -156,22 +175,15 @@ var webpackConfig = module.exports = {
         loader: 'css-loader',
         options: {
           modules: true,
-          importLoaders: 3,
+          importLoaders: 2,
           sourceMap: true,
           localIdentName: '[local]___[hash:base64:5]'
         }
       }, {
         loader: 'postcss-loader',
         options: {
-          sourceMap: true,
-          ctx: {
-            cssnext: {
-              browsers: 'last 2 version'
-            }
-          }
+          sourceMap: true
         }
-      }, {
-        loader: 'resolve-url-loader',
       }, {
         loader: 'less-loader',
         query: {
@@ -188,22 +200,15 @@ var webpackConfig = module.exports = {
         loader: 'css-loader',
         options: {
           modules: true,
-          importLoaders: 3,
+          importLoaders: 2,
           sourceMap: true,
           localIdentName: '[local]___[hash:base64:5]'
         }
       }, {
         loader: 'postcss-loader',
         options: {
-          sourceMap: true,
-          ctx: {
-            cssnext: {
-              browsers: 'last 2 version'
-            }
-          }
+          sourceMap: true
         }
-      }, {
-        loader: 'resolve-url-loader',
       }, {
         loader: 'sass-loader',
         options: {

webpack/prod.config.js

@@ -50,21 +50,14 @@ module.exports = {
               loader: 'css-loader',
               options: {
                 modules: true,
-                importLoaders: 3,
+                importLoaders: 2,
                 sourceMap: true
               }
             }, {
               loader: 'postcss-loader',
               options: {
-                sourceMap: true,
-                ctx: {
-                  cssnext: {
-                    browsers: 'last 2 version'
-                  }
-                }
+                sourceMap: true
               }
-            }, {
-              loader: 'resolve-url-loader',
             }, {
               loader: 'less-loader',
               options: {
@@ -84,21 +77,14 @@ module.exports = {
               loader: 'css-loader',
               options: {
                 modules: true,
-                importLoaders: 3,
+                importLoaders: 2,
                 sourceMap: true
               }
             }, {
               loader: 'postcss-loader',
               options: {
-                sourceMap: true,
-                ctx: {
-                  cssnext: {
-                    browsers: 'last 2 version'
-                  }
-                }
+                sourceMap: true
               }
-            }, {
-              loader: 'resolve-url-loader',
             }, {
               loader: 'sass-loader',
               options: {
@@ -150,6 +136,25 @@ module.exports = {
     extensions: ['.json', '.js', '.jsx']
   },
   plugins: [
+    new webpack.LoaderOptionsPlugin({
+      test: /\.(less|scss)/,
+      options: {
+        postcss: function (webpack) {
+          return [
+            require("postcss-import")({ addDependencyTo: webpack }),
+            require("postcss-url")(),
+            require("postcss-cssnext")({ browsers: 'last 2 version' }),
+            // add your "plugins" here
+            // ...
+            // and if you want to compress,
+            // just use css-loader option that already use cssnano under the hood
+            require("postcss-browser-reporter")(),
+            require("postcss-reporter")(),
+          ]
+        }
+      }
+    }),
+
     new CleanPlugin([assetsPath], { root: projectRootPath }),
 
     // css files from the extract-text-plugin loader