feat: Add support for css-loader 2

BREAKING CHANGE: CSS modules are only supported with css-loader >= 2.x

Author: jantimon

example/default/dist/bundle.js

@@ -1,12 +1,12 @@
-@font-face { font-family: Ef1877; src:url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ8AAsAAAAABlQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPwAAAFY2IECvY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAKkAAACs+Z1drGhlYWQAAAJ8AAAAMAAAADYRnnKeaGhlYQAAAqwAAAAYAAAAJAfIA+tobXR4AAACxAAAAAgAAAAIA+gAAGxvY2EAAALMAAAABgAAAAYAVgAAbWF4cAAAAtQAAAAgAAAAIAEPAERuYW1lAAAC9AAAASkAAAIWm5e+CnBvc3QAAAQgAAAAGwAAACxqQQEEeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGT8wjiBgZWBgamKaQ8DA0MPhGZ8wGDIyAQUZWBlZsAKAtJcUxgcHjA8YGB+AeRGAUlGIA3CDAABXgs9AHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nBXLQQqCQBTG8fcaMsK3eIHNRGBTRrooCNQUIj1G4A26SB3CExS07xC2dN/SW4yN8PFf/T4QAH0vfqKGJUSQA2Dg+BiFwQQdT8b5FGWcpUecpeF2jHNvhckmLrHAXRJLHz1nj0FYYJoJZNnQmkxJShM+8UVauQ/J5msqfdKjm42hmqXkIaJW/Glc11yss95caaHpjgdWb1O1Ftu1Z8Xd8OhYwR+ErCSFAAAAeJxjYGRgYADiTR5fIuP5bb4ycDO/AIowXA8QF0DQ//8z32eeBeRyMDCBRAE8ewsCeJxjYGRgYH7BwAAn7zMwMqACJgBEkQK9AAAAAAPoAAAAAAAAAFYAAAABAAAAAgA4AAMAAAAAAAIAAAAKAAoAAAD/AAAAAAAAeJxlkD1uwkAUhMdgSAJSghQpKbNVCiKZn5IDQE9Bl8KYtTGyvdZ6QaLLCXKEHCGniHKCHChj82hgLT9/M2/e7soABviFh3p5uG1qvVq4oTpxm/Qg7JOfhTvo40W4S38o3MMbpsJ9POKdO3j+HZ0BSuEW7vEh3Kb/KeyTv4Q7eMK3cJf+j3APK/wJ9/HqDdPIFLEp3FIn+yy0Z3n+rrStUlOoSTA+WwtdaBs6vVHro6oOydS5WMXW5GrOrs4yo0prdjpywda5cjYaxeIHkcmRIoJBgbipDktoJNgjQwh71b3UK6YtKvq1VpggwPgqtWCqaJIhlcaGyTWOrBUOPG1K1zGt+FrO5KS5zGreJCMr/u+6t6MT0Q+wbaZKzDDiE1/kg+YO+T89EV6oAAAAeJxjYGKAAC4G7ICJkYmRmYEp04CBAQAEbQCxAA==) format('woff');font-weight: normal;font-style: normal;}
+@font-face { font-family: Ef1877; src:url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAARAAAsAAAAABlQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPwAAAFY2IECvY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAKkAAACs+Z1drGhlYWQAAAJ8AAAAMQAAADYVRG5eaGhlYQAAArAAAAAYAAAAJAfIA+tobXR4AAACyAAAAAgAAAAIA+gAAGxvY2EAAALQAAAABgAAAAYAVgAAbWF4cAAAAtgAAAAgAAAAIAEPAERuYW1lAAAC+AAAASkAAAIWm5e+CnBvc3QAAAQkAAAAGwAAACxqQQEEeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGT8wjiBgZWBgamKaQ8DA0MPhGZ8wGDIyAQUZWBlZsAKAtJcUxgcHjA8YGB+AeRGAUlGIA3CDAABXgs9AHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nBXLQQqCQBTG8fcaMsK3eIHNRGBTRrooCNQUIj1G4A26SB3CExS07xC2dN/SW4yN8PFf/T4QAH0vfqKGJUSQA2Dg+BiFwQQdT8b5FGWcpUecpeF2jHNvhckmLrHAXRJLHz1nj0FYYJoJZNnQmkxJShM+8UVauQ/J5msqfdKjm42hmqXkIaJW/Glc11yss95caaHpjgdWb1O1Ftu1Z8Xd8OhYwR+ErCSFAAAAeJxjYGRgYADiVX/+3Iznt/nKwM38AijCcFNZ5AOC/v+f+T7zLCCXg4EJJAoAkN0NmgAAAHicY2BkYGB+wcAAJ+8zMDKgAiYARJECvQAAAAAD6AAAAAAAAABWAAAAAQAAAAIAOAADAAAAAAACAAAACgAKAAAA/wAAAAAAAHicZZA9bsJAFITHYEgCUoIUKSmzVQoimZ+SA0BPQZfCmLUxsr3WekGiywlyhBwhp4hyghwoY/NoYC0/fzNv3u7KAAb4hYd6ebhtar1auKE6cZv0IOyTn4U76ONFuEt/KNzDG6bCfTzinTt4/h2dAUrhFu7xIdym/ynsk7+EO3jCt3CX/o9wDyv8Cffx6g3TyBSxKdxSJ/sstGd5/q60rVJTqEkwPlsLXWgbOr1R66OqDsnUuVjF1uRqzq7OMqNKa3Y6csHWuXI2GsXiB5HJkSKCQYG4qQ5LaCTYI0MIe9W91CumLSr6tVaYIMD4KrVgqmiSIZXGhsk1jqwVDjxtStcxrfhazuSkucxq3iQjK/7vurejE9EPsG2mSsww4hNf5IPmDvk/PRFeqAAAAHicY2BigAAuBuyAiZGJkZmBKdOAgQEABG0AsQA=) format('woff');font-weight: normal;font-style: normal;}
 
 a:before {
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-family: Ef1877;
   font-weight: normal;
-  content: '\E000';
+  content: '\e000';
   transition: 0.5s color;
 }
 
@@ -19,5 +19,6 @@ a:after {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font: normal normal normal 50%/1 Ef1877;
-  content: '\E000';
+  content: '\e000';
 }
+

example/default/dist/styles.css

@@ -1,6 +1,6 @@
 var path = require('path');
 var IconfontWebpackPlugin = require('../../');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
   entry: './example.js',
@@ -12,25 +12,23 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            'css-loader',
-            {
-              loader: 'postcss-loader',
-              options: {
-                plugins: (loader) => [
-                  new IconfontWebpackPlugin(loader)
-                ]
-              }
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: (loader) => [
+                new IconfontWebpackPlugin(loader)
+              ]
             }
-          ]
-        })
+          }
+        ]
       }
     ]
   },
   plugins: [
-    new ExtractTextPlugin('styles.css')
+    new MiniCssExtractPlugin({ filename: 'styles.css' })
   ]
 };
 

example/default/webpack.config.js

@@ -1,12 +1,12 @@
-@font-face { font-family: Jb5067; src:url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAARcAAsAAAAABmwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAQQAAAFY2IEBzY21hcAAAAYgAAABKAAABcOEoo6pnbHlmAAAB1AAAALoAAADEtSXUXWhlYWQAAAKQAAAAMQAAADYRhXM6aGhlYQAAAsQAAAAfAAAAJAewA8RobXR4AAAC5AAAAAgAAAAIA8T//2xvY2EAAALsAAAABgAAAAYAYgAAbWF4cAAAAvQAAAAeAAAAIAENAEtuYW1lAAADFAAAASkAAAIWm5e+CnBvc3QAAARAAAAAGwAAACxqQQEEeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGR8xDiBgZWBgSmZaQ8DA0MPhGZ8wGDIyAQUZWBlZsAKAtJcUxgcHjA8YGB+AeRGMb9hYATSIMwAAO7jCwEAAAB4nO2QsQ2AMBADz8pDgRiBKjWzULG/2CT5GNgils6ST189sAAlOZMA3YiRK63sC5t9UH0Twz+09nfucKOVmd19fMu/ekEdGiYJUQAAeJwliFEOwTAch/tf202tWlZtbSYbEvGEbWJvk8wjD47gABLx6gYu4iou4w4M3y/5fsmH4N2An/iFKoSyTfnbFv7nFOUSyqLczH69AmusSUCC9VwJbiOcOOYbPUqF1DqKAqNCqS/nKmZDTjuEQIsJNRjt8vlqOo1Z4GPiuS1fqvHIXFmbM05dqvvFos6qVHR9iR2C97f4MMnXXFk9DLTPmRKBeBSkqzo6lAZOaX0/tkXPRskYfQA5xxr5AAB4nGNgZGBgAGLrM6w74/ltvjJwM78AijBcDxA3hdH/gYD5OPMbIJeDgQkkCgBRKg0CAAAAeJxjYGRgYH7BAATMR/7///+X+TgDIwMqYAIAmMEGewAAAAAAA8T//wAAAAAAYgAAeJxjYGRgYGBisGcA0SAWAwMXEDIw/AfzGQAOvgFZAAB4nGWQPW7CQBSEx2BIAlKCFCkps1UKIpmfkgNAT0GXwpi1MbK91npBossJcoQcIaeIcoIcKGPzaGAtP38zb97uygAG+IWHenm4bWq9WrihOnGb9CDsk5+FO+jjRbhLfyjcwxumwn084p07eP4dnQFK4Rbu8SHcpv8p7JO/hDt4wrdwl/6PcA8r/An38eoN08gUsSncUif7LLRnef6utK1SU6hJMD5bC11oGzq9Ueujqg7J1LlYxdbkas6uzjKjSmt2OnLB1rlyNhrF4geRyZEigkGBuKkOS2gk2CNDCHvVvdQrpi0q+rVWmCDA+Cq1YKpokiGVxobJNY6sFQ48bUrXMa34Ws7kpLnMat4kIyv+77q3oxPRD7BtpkrMMOITX+SD5g75Pz0RXqgAAAB4nGNgYoAALgbsgImRiZGZgSnTgIEBAARtALEA) format('woff');font-weight: normal;font-style: normal;}
+@font-face { font-family: Jb5067; src:url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAARcAAsAAAAABmwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAQQAAAFY2IEBzY21hcAAAAYgAAABKAAABcOEoo6pnbHlmAAAB1AAAALoAAADEtSXUXWhlYWQAAAKQAAAAMQAAADYVK3GgaGhlYQAAAsQAAAAfAAAAJAewA8RobXR4AAAC5AAAAAgAAAAIA8T//2xvY2EAAALsAAAABgAAAAYAYgAAbWF4cAAAAvQAAAAeAAAAIAENAEtuYW1lAAADFAAAASkAAAIWm5e+CnBvc3QAAARAAAAAGwAAACxqQQEEeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGR8xDiBgZWBgSmZaQ8DA0MPhGZ8wGDIyAQUZWBlZsAKAtJcUxgcHjA8YGB+AeRGMb9hYATSIMwAAO7jCwEAAAB4nO2QsQ2AMBADz8pDgRiBKjWzULG/2CT5GNgils6ST189sAAlOZMA3YiRK63sC5t9UH0Twz+09nfucKOVmd19fMu/ekEdGiYJUQAAeJwliFEOwTAch/tf202tWlZtbSYbEvGEbWJvk8wjD47gABLx6gYu4iou4w4M3y/5fsmH4N2An/iFKoSyTfnbFv7nFOUSyqLczH69AmusSUCC9VwJbiOcOOYbPUqF1DqKAqNCqS/nKmZDTjuEQIsJNRjt8vlqOo1Z4GPiuS1fqvHIXFmbM05dqvvFos6qVHR9iR2C97f4MMnXXFk9DLTPmRKBeBSkqzo6lAZOaX0/tkXPRskYfQA5xxr5AAB4nGNgZGBgAGKTBo638fw2Xxm4mV8ARRhuKotlwOj/QMB8nPkNkMvBwAQSBQBMZAz0AAAAeJxjYGRgYH7BAATMR/7///+X+TgDIwMqYAIAmMEGewAAAAAAA8T//wAAAAAAYgAAeJxjYGRgYGBisGcA0SAWAwMXEDIw/AfzGQAOvgFZAAB4nGWQPW7CQBSEx2BIAlKCFCkps1UKIpmfkgNAT0GXwpi1MbK91npBossJcoQcIaeIcoIcKGPzaGAtP38zb97uygAG+IWHenm4bWq9WrihOnGb9CDsk5+FO+jjRbhLfyjcwxumwn084p07eP4dnQFK4Rbu8SHcpv8p7JO/hDt4wrdwl/6PcA8r/An38eoN08gUsSncUif7LLRnef6utK1SU6hJMD5bC11oGzq9Ueujqg7J1LlYxdbkas6uzjKjSmt2OnLB1rlyNhrF4geRyZEigkGBuKkOS2gk2CNDCHvVvdQrpi0q+rVWmCDA+Cq1YKpokiGVxobJNY6sFQ48bUrXMa34Ws7kpLnMat4kIyv+77q3oxPRD7BtpkrMMOITX+SD5g75Pz0RXqgAAAB4nGNgYoAALgbsgImRiZGZgSnTgIEBAARtALEA) format('woff');font-weight: normal;font-style: normal;}
 
 a:before {
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-family: Jb5067;
   font-weight: normal;
-  content: '\E000';
+  content: '\e000';
   transition: 0.5s color;
 }
 
@@ -19,5 +19,5 @@ a:after {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font: normal normal normal 50%/1 Jb5067;
-  content: '\E000';
-}
+  content: '\e000';
+}

example/module/dist/bundle.js

@@ -1,6 +1,6 @@
 var path = require('path');
 var IconfontWebpackPlugin = require('../../');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
   entry: './example.js',
@@ -12,33 +12,30 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            {
-              loader: 'css-loader',
-              options: {
-                modules: true
-              }
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                plugins: (loader) => [
-                  new IconfontWebpackPlugin({
-                    resolve: loader.resolve,
-                    modules: true
-                  })
-                ]
-              }
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true
             }
-          ]
-        })
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: (loader) => [
+                new IconfontWebpackPlugin({
+                  resolve: loader.resolve
+                })
+              ]
+            }
+          }
+        ]
       }
     ]
   },
   plugins: [
-    new ExtractTextPlugin('styles.css')
+    new MiniCssExtractPlugin({ filename: 'styles.css' })
   ]
 };
 

example/module/dist/styles.css

@@ -144,23 +144,19 @@ function replaceIconFontDeclarations (fontName, postCssRoot, svgPaths) {
 /**
  * @param fontName {string} The name of the font (font-family)
  * @param postCssRoot {object} The postCss root object
- * @param useCssModules {boolean} wether the css loader is using css-modules or not
  * @param enforcedSvgHeight {number} the enforced height of the svg font
  * @param svgPaths {object} The svg path information
  */
-function addFontDeclaration (fontName, postCssRoot, useCssModules, enforcedSvgHeight, svgPaths) {
+function addFontDeclaration (fontName, postCssRoot, enforcedSvgHeight, svgPaths) {
   // The options are passed as a query string so we use the relative svg paths to reduce the path length per file
   const options = { svgs: svgPaths.relative, name: fontName, enforcedSvgHeight: enforcedSvgHeight };
-  // Use ~ to tell the loader-utils of the css loader that this is a webpack path
-  // Unfortunately this works only if the css-loader is not using css modules
-  const prefix = useCssModules ? '' : '~';
   // Resolve the icon font plugin directoy in case the iconfont-webpack-plugin is used as a sub dependency
   const iconFontPluginDirectory = path.dirname(require.resolve('../'));
   // Use paths always with slash also for win32 to prevent an issues with resolving the placeholder on windows
   const iconFontLoaderPath = path.join(iconFontPluginDirectory, 'lib/loader.js').replace(/\\/g, '/');
   const iconFontPlaceholderPath = path.join(iconFontPluginDirectory, 'placeholder.svg').replace(/\\/g, '/');
   // Use !! to tell webpack that we don't want any other loader to kick in
-  const url = prefix + '!!' + iconFontLoaderPath + '?' + JSON.stringify(options) + '!' + iconFontPlaceholderPath;
+  const url = '~!!' + iconFontLoaderPath + '?' + JSON.stringify(options) + '!' + iconFontPlaceholderPath;
   postCssRoot.prepend(postcss.parse(
     '@font-face { ' +
     'font-family: ' + fontName + '; src:url(\'' + url + '\') format(\'woff\');' +
@@ -191,7 +187,7 @@ module.exports = postcss.plugin('iconfont-webpack', config => function (root, re
       // Update the css
       return Promise.all([
         // add the font faces
-        addFontDeclaration(fontName, root, config.modules, config.enforcedSvgHeight, svgPaths),
+        addFontDeclaration(fontName, root, config.enforcedSvgHeight, svgPaths),
         // replace the `font-icon` occurences
         replaceIconFontDeclarations(fontName, root, svgPaths)
       ]);