Update extract-text-webpack-plugin to 2.1.0

Author: Michel Herszak

package.json

@@ -178,7 +178,7 @@
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-react": "^6.10.0",
-    "extract-text-webpack-plugin": "2.0.0-beta.5",
+    "extract-text-webpack-plugin": "2.1.0",
     "file-loader": "^0.10.0",
     "font-awesome": "^4.7.0",
     "font-awesome-webpack": "^0.0.4",

src/theme/buildExtractStylesLoader.js

@@ -0,0 +1,43 @@
+/**
+ * @summary: The encoder function is capable to apply either incoming strings from webpack modules or objects.
+ * @param loader
+ * @returns {string}
+ */
+function encodeLoader(loader) {
+  if (typeof loader === 'string') {
+    return loader;
+  }
+
+  if (typeof loader.options !== 'undefined') {
+    const query = Object
+      .keys(loader.options)
+      .map((param) => `${encodeURIComponent(param)}=${encodeURIComponent(loader.options[param])}`)
+      .join('&');
+    return `${loader.loader}?${query}`;
+  }
+  return loader.loader;
+}
+
+/**
+ * buildExtractStylesLoader can also deal with options without any trouble as
+ * it converts them to query parameters if needed.
+ */
+module.exports = function buildExtractStylesLoader(loaders) {
+  const extractTextLoader = encodeLoader(loaders[0]);
+  const fallbackLoader = encodeLoader(loaders[1]);
+
+  const restLoaders = loaders
+    .slice(2)
+    .map((loader) => {
+      if (typeof loader === 'string') {
+        return loader;
+      }
+      return encodeLoader(loader);
+    });
+
+  return [
+    extractTextLoader,
+    fallbackLoader,
+    ...restLoaders,
+  ].join('!');
+};

src/theme/font-awesome.config.prod.js

@@ -1,7 +1,13 @@
+const buildExtractStylesLoader = require('./buildExtractStylesLoader');
 const fontAwesomeConfig = require('./font-awesome.config.js');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-fontAwesomeConfig.styleLoader = ExtractTextPlugin.extract({
-  fallbackLoader: 'style-loader',
-  loader: 'css-loader!less-loader'
-});
+
+/**
+ * buildExtractStylesLoader can also deal with options without any trouble as
+ * it converts them to query parameters if needed.
+ */
+fontAwesomeConfig.styleLoader = buildExtractStylesLoader(ExtractTextPlugin.extract({
+  fallback: 'style-loader',
+  use: ['css-loader', 'less-loader'],
+}));
 module.exports = fontAwesomeConfig;