feat(loader): Add support for css-modules

README.md

@@ -46,6 +46,12 @@ const IconfontWebpackPlugin = require('iconfont-webpack-plugin');
 
 ## Advanced Configuration
 
+|Name|Type|Default|Description|
+|:--:|:--:|:-----:|:----------|
+|**`resolve`**|`{Function}`||Required - A function which resolves the svg paths. See [resolve](https://webpack.js.org/api/loaders/#this-resolve)|
+|**`fontNamePrefix`**|`{String}`|`''`| Allows to prefix the generated font name |
+|**`modules`**|`{Boolean}`|`false`|Enable/Disable CSS Modules - should be equal to your css-loader settings |
+
 
 ```js
 vconst IconfontWebpackPlugin = require('iconfont-webpack-plugin');
@@ -64,6 +70,7 @@ vconst IconfontWebpackPlugin = require('iconfont-webpack-plugin');
                 new IconfontWebpackPlugin({
                   resolve: loader.resolve,
                   fontNamePrefix: 'custom-',
+                  modules: false,
                 })
               ]
             }

example/default/dist/styles.css

@@ -1,4 +1,4 @@
-@font-face { font-family: u84c0f; src:url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAAsAAAAABkwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPwAAAFYvsjszY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAJcAAACkBXkxZWhlYWQAAAJoAAAALwAAADYMV/uxaGhlYQAAApgAAAAeAAAAJAPxAe9obXR4AAACuAAAAAgAAAAIAe7//2xvY2EAAALAAAAABgAAAAYAUgAAbWF4cAAAAsgAAAAeAAAAIAENAEBuYW1lAAAC6AAAASkAAAIWm5e+CnBvc3QAAAQUAAAAGwAAACxqPAEEeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGT4zjiBgZWBgdGSMY2BgcEdSn9lkGRoYWBgYmBlZsAKAtJcUxgcHjA8AKoBAj0mZgZGIA3CDACcLwhKAHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nB2IQQrCMBAAs5s0mzZpY6KmkoNFkYoiSik04KHe/IGf8PX+QIMzMIdh8M3ABzkbGRumlH3AP2O6QRrT1Oc3Qxs6sNCStCBzeIehDVQIY7xbrrV7d1bUxAkRqGz85RC3m6KUCIILqUpnzb1QlSDh3Xl3DU2DiMfZ9j5GZX3tSavGvCKqirRRGobF/nmqjF0F9gOdHRIIAHicY2BkYGAA4r0bPH/H89t8ZeBmYgCBq0vuRsLo/0DA+IGJGcjlYABLAwCOBg66AHicY2BkYGBiAAHGd//////H+IGBkQEVMAEAg2cF4gAAAAAAAAHu//8AAAAAAFIAAHicY2BkYGBgYjBhANEgFgMDFxAyMPwH8xkADasBTgAAeJxlkD1uwkAUhMdgSAJSghQpKbNVCiKZn5IDQE9Bl8KYtTGyvdZ6QaLLCXKEHCGniHKCHChj82hgLT9/M2/e7soABviFh3p5uG1qvVq4oTpxm/Qg7JOfhTvo40W4S38o3MMbpsJ9POKdO3j+HZ0BSuEW7vEh3Kb/KeyTv4Q7eMK3cJf+j3APK/wJ9/HqDdPIFLEp3FIn+yy0Z3n+rrStUlOoSTA+WwtdaBs6vVHro6oOydS5WMXW5GrOrs4yo0prdjpywda5cjYaxeIHkcmRIoJBgbipDktoJNgjQwh71b3UK6YtKvq1VpggwPgqtWCqaJIhlcaGyTWOrBUOPG1K1zGt+FrO5KS5zGreJCMr/u+6t6MT0Q+wbaZKzDDiE1/kg+YO+T89EV6oAAAAeJxjYGKAAFYG7ICJkYmRmYEp04CBAQADvgCsAA==") format('woff');font-weight: normal;font-style: normal;}
+@font-face { font-family: u84c0f; src:url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAAsAAAAABkwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPwAAAFYvsjszY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAJcAAACkBXkxZWhlYWQAAAJoAAAALgAAADYMYvNJaGhlYQAAApgAAAAeAAAAJAPxAe9obXR4AAACuAAAAAgAAAAIAe7//2xvY2EAAALAAAAABgAAAAYAUgAAbWF4cAAAAsgAAAAeAAAAIAENAEBuYW1lAAAC6AAAASkAAAIWm5e+CnBvc3QAAAQUAAAAGwAAACxqPAEEeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGT4zjiBgZWBgdGSMY2BgcEdSn9lkGRoYWBgYmBlZsAKAtJcUxgcHjA8AKoBAj0mZgZGIA3CDACcLwhKAHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nB2IQQrCMBAAs5s0mzZpY6KmkoNFkYoiSik04KHe/IGf8PX+QIMzMIdh8M3ABzkbGRumlH3AP2O6QRrT1Oc3Qxs6sNCStCBzeIehDVQIY7xbrrV7d1bUxAkRqGz85RC3m6KUCIILqUpnzb1QlSDh3Xl3DU2DiMfZ9j5GZX3tSavGvCKqirRRGobF/nmqjF0F9gOdHRIIAHicY2BkYGAA4r2zok7H89t8ZeBmYgCBq6siVWH0fyBg/MDEDORyMIClAWQYDSEAAHicY2BkYGBiAAHGd//////H+IGBkQEVMAEAg2cF4gAAAAAAAAHu//8AAAAAAFIAAHicY2BkYGBgYjBhANEgFgMDFxAyMPwH8xkADasBTgAAeJxlkD1uwkAUhMdgSAJSghQpKbNVCiKZn5IDQE9Bl8KYtTGyvdZ6QaLLCXKEHCGniHKCHChj82hgLT9/M2/e7soABviFh3p5uG1qvVq4oTpxm/Qg7JOfhTvo40W4S38o3MMbpsJ9POKdO3j+HZ0BSuEW7vEh3Kb/KeyTv4Q7eMK3cJf+j3APK/wJ9/HqDdPIFLEp3FIn+yy0Z3n+rrStUlOoSTA+WwtdaBs6vVHro6oOydS5WMXW5GrOrs4yo0prdjpywda5cjYaxeIHkcmRIoJBgbipDktoJNgjQwh71b3UK6YtKvq1VpggwPgqtWCqaJIhlcaGyTWOrBUOPG1K1zGt+FrO5KS5zGreJCMr/u+6t6MT0Q+wbaZKzDDiE1/kg+YO+T89EV6oAAAAeJxjYGKAAFYG7ICJkYmRmYEp04CBAQADvgCsAA==") format('woff');font-weight: normal;font-style: normal;}
 
 a:before {
   text-rendering: auto;

example/module/dist/bundle.js

@@ -0,0 +1,80 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__(1);
+
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+// removed by extract-text-webpack-plugin
+
+/***/ })
+/******/ ]);

example/module/dist/index.html

@@ -0,0 +1,3 @@
+<link rel="stylesheet" type="text/css" href="./styles.css">
+<script src="bundle.js"></script>
+<a href="#">click me</a>

example/module/dist/styles.css

@@ -0,0 +1,23 @@
+@font-face { font-family: Jb5067; src:url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAAsAAAAABkwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPwAAAFYvsjszY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAJcAAACkBXkxZWhlYWQAAAJoAAAALgAAADYMYvM5aGhlYQAAApgAAAAeAAAAJAPxAe9obXR4AAACuAAAAAgAAAAIAe7//2xvY2EAAALAAAAABgAAAAYAUgAAbWF4cAAAAsgAAAAeAAAAIAENAEBuYW1lAAAC6AAAASkAAAIWm5e+CnBvc3QAAAQUAAAAGwAAACxqPAEEeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGT4zjiBgZWBgdGSMY2BgcEdSn9lkGRoYWBgYmBlZsAKAtJcUxgcHjA8AKoBAj0mZgZGIA3CDACcLwhKAHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nB2IQQrCMBAAs5s0mzZpY6KmkoNFkYoiSik04KHe/IGf8PX+QIMzMIdh8M3ABzkbGRumlH3AP2O6QRrT1Oc3Qxs6sNCStCBzeIehDVQIY7xbrrV7d1bUxAkRqGz85RC3m6KUCIILqUpnzb1QlSDh3Xl3DU2DiMfZ9j5GZX3tSavGvCKqirRRGobF/nmqjF0F9gOdHRIIAHicY2BkYGAA4r2zol7H89t8ZeBmYgCBq6siZWH0fyBg/MDEDORyMIClAWgIDTEAAHicY2BkYGBiAAHGd//////H+IGBkQEVMAEAg2cF4gAAAAAAAAHu//8AAAAAAFIAAHicY2BkYGBgYjBhANEgFgMDFxAyMPwH8xkADasBTgAAeJxlkD1uwkAUhMdgSAJSghQpKbNVCiKZn5IDQE9Bl8KYtTGyvdZ6QaLLCXKEHCGniHKCHChj82hgLT9/M2/e7soABviFh3p5uG1qvVq4oTpxm/Qg7JOfhTvo40W4S38o3MMbpsJ9POKdO3j+HZ0BSuEW7vEh3Kb/KeyTv4Q7eMK3cJf+j3APK/wJ9/HqDdPIFLEp3FIn+yy0Z3n+rrStUlOoSTA+WwtdaBs6vVHro6oOydS5WMXW5GrOrs4yo0prdjpywda5cjYaxeIHkcmRIoJBgbipDktoJNgjQwh71b3UK6YtKvq1VpggwPgqtWCqaJIhlcaGyTWOrBUOPG1K1zGt+FrO5KS5zGreJCMr/u+6t6MT0Q+wbaZKzDDiE1/kg+YO+T89EV6oAAAAeJxjYGKAAFYG7ICJkYmRmYEp04CBAQADvgCsAA==") format('woff');font-weight: normal;font-style: normal;}
+
+a:before {
+  text-rendering: auto;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  font-family: Jb5067;
+  font-weight: normal;
+  content: '\E000';
+  transition: 0.5s color;
+}
+
+a:hover:before {
+  color: red;
+}
+
+a:after {
+  text-rendering: auto;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  font: normal normal normal 50%/1 Jb5067;
+  content: '\E000';
+}

example/module/example.js

@@ -0,0 +1 @@
+require('./main.css');

example/module/main.css

@@ -0,0 +1,12 @@
+a:before {
+  font-icon: url('./account.svg');
+  transition: 0.5s color;
+}
+
+a:hover:before {
+  color: red;
+}
+
+a:after {
+  font-icon: 50% url('./account.svg');
+}

example/module/webpack.config.js

@@ -0,0 +1,48 @@
+var path = require('path');
+var IconfontWebpackPlugin = require('../../');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+  entry: './example.js',
+  output: {
+    path: path.join(__dirname, 'dist/'),
+    publicPath: '',
+    filename: 'bundle.js'
+  },
+  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
+                  })
+                ]
+              }
+            }
+          ]
+        })
+      }
+    ]
+  },
+  plugins: [
+    new ExtractTextPlugin('styles.css')
+  ]
+};
+
+// The following lines are only for mocking a real webpack environment
+// please don't use them for your configuration
+module.exports.context = __dirname;
+module.exports.bail = true;

lib/loader.js

@@ -16,6 +16,9 @@ module.exports = function () {
     this.cacheable();
   }
   const callback = this.async();
+  // The query is built in postcss-plugin.js in addFontDeclaration
+  // it contains the following values:
+  // { svgs: resolvedRelativeSvgs, name: fontName };
   const query = loaderUtils.parseQuery(this.query);
   // Add svgs to webpack file watching:
   query.svgs.forEach((svg) => this.addDependency(path.resolve(svg)));

lib/postcss-plugin.js

@@ -1,14 +1,15 @@
 'use strict';
 const postcss = require('postcss');
 const path = require('path');
-const urlRegexp = new RegExp('url\\(("([^"]+)"|\'([^\']+)\'|([^\'")]+))\\)');
 const _ = require('lodash');
 const crypto = require('crypto');
 
+const urlRegexp = new RegExp('url\\s*\\((\\s*"([^"]+)"|\'([^\']+)\'|([^\'")]+))\\)');
+
 /**
- * Turn `url("./demo.svg")` into `demo.svg`
+ * Turn `url("demo.svg")` into `demo.svg`
  */
-function getRelativeIconPath (value) {
+function getUnresolvedIconPath (value) {
   const relativePathResult = urlRegexp.exec(value);
   if (!relativePathResult) {
     throw new Error(`Could not parse url "${value}".`);
@@ -22,13 +23,13 @@ function parseFontIconValue (value) {
   // Just a url
   // font-icon: url('./demo.svg');
   if (valueParts.length === 1) {
-    result.url = getRelativeIconPath(valueParts[0]);
+    result.url = getUnresolvedIconPath(valueParts[0]);
   }
   // Font size and url
   // font-icon: 20px url('./demo.svg');
   if (valueParts.length === 2) {
     result.size = valueParts[0];
-    result.url = getRelativeIconPath(valueParts[1]);
+    result.url = getUnresolvedIconPath(valueParts[1]);
   }
   return result;
 }
@@ -78,9 +79,9 @@ function getSvgPaths (postCssRoot, webpackResolve, context) {
 /**
  * @param fontName {string} The name of the font (font-family)
  * @param postCssRoot {object} The postCss root object
- * @param resolvedSvgs {string[]} An array of unresolved files
+ * @param svgPaths {object} The svg path information
  */
-function replaceIconFontDeclarations (fontName, postCssRoot, unresolvedSvgPaths) {
+function replaceIconFontDeclarations (fontName, postCssRoot, svgPaths) {
   postCssRoot.walkDecls((decl) => {
     if (decl.prop === 'font-icon') {
       const fontIcon = parseFontIconValue(decl.value);
@@ -116,7 +117,7 @@ function replaceIconFontDeclarations (fontName, postCssRoot, unresolvedSvgPaths)
         });
       }
       // Look up the index of the svg in the array to generate the unicode char position
-      const iconCharCode = unresolvedSvgPaths.indexOf(getRelativeIconPath(decl.value));
+      const iconCharCode = svgPaths.unresolved.indexOf(getUnresolvedIconPath(decl.value));
       decl.value = '\'\\e' + _.padStart(iconCharCode.toString(16), 3, '0') + '\'';
       // Turn `font-icon:` into `content:`
       decl.prop = 'content';
@@ -127,14 +128,17 @@ function replaceIconFontDeclarations (fontName, postCssRoot, unresolvedSvgPaths)
 /**
  * @param fontName {string} The name of the font (font-family)
  * @param postCssRoot {object} The postCss root object
- * @param resolvedSvgs {string[]} An array of absolute paths to svgs
+ * @param useCssModules {boolean} wether the css loader is using css-modules or not
+ * @param resolvedRelativeSvgs {object} The svg path information
  */
-function addFontDeclaration (fontName, postCssRoot, resolvedRelativeSvgs) {
-  // Turn paths into shorter relative paths
-  const options = { svgs: resolvedRelativeSvgs, name: fontName };
+function addFontDeclaration (fontName, postCssRoot, useCssModules, 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 };
   // 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 ? '' : '~';
   // Use !! to tell webpack that we don't want any other loader to kick in
-  const url = '~!!iconfont-webpack-plugin/lib/loader.js?' + JSON.stringify(options) + '!iconfont-webpack-plugin/placeholder.svg';
+  const url = prefix + '!!iconfont-webpack-plugin/lib/loader.js?' + JSON.stringify(options) + '!iconfont-webpack-plugin/placeholder.svg';
   postCssRoot.prepend(postcss.parse(
     '@font-face { ' +
     'font-family: ' + fontName + '; src:url(\'' + url + '\') format(\'woff\');' +
@@ -162,11 +166,10 @@ module.exports = postcss.plugin('iconfont-webpack', config => function (root, re
       let fontName = md5sum.digest('hex').substr(0, 6);
       // Prefix the fontname with a letter as fonts with a leading number are not allowed
       fontName = config.fontNamePrefix + String.fromCharCode(fontName.charCodeAt(0) + 20) + fontName.substr(1);
-
       // Update the css
       return Promise.all([
-        addFontDeclaration(fontName, root, svgPaths.relative),
-        replaceIconFontDeclarations(fontName, root, svgPaths.unresolved)
+        addFontDeclaration(fontName, root, config.modules, svgPaths),
+        replaceIconFontDeclarations(fontName, root, svgPaths)
       ]);
     });
 });

package.json

@@ -13,6 +13,7 @@
     "prepublish": "npm run test",
     "changelog": "conventional-changelog -s -i CHANGELOG.md -p angular",
     "example:default": "webpack --config example/default/webpack.config.js",
+    "example:module": "webpack --config example/module/webpack.config.js",
     "test": "ava -v",
     "posttest": "npm-run-all posttest:*",
     "posttest:lint": "semistandard",

test/postcss-plugin.js

@@ -6,10 +6,11 @@ import postcss from 'postcss';
 import postcssPlugin from '../lib/postcss-plugin.js';
 import { loader } from './helpers/loader-mock.js';
 
-async function processCss (css, fontNamePrefix = '') {
+async function processCss (css, options = {}) {
   const postCssPluginOptions = {
     resolve: loader.resolve,
-    fontNamePrefix: fontNamePrefix
+    fontNamePrefix: options.fontNamePrefix || '',
+    modules: options.modules
   };
   const trimmedCss = css.replace(/\s*\n\s*/g, '\n');
   return postcss([ postcssPlugin(postCssPluginOptions) ])
@@ -26,6 +27,10 @@ function getDeclarations (cssNode, propertyName) {
   return declarations;
 }
 
+/**
+ * Small helper to get information from postcss nodes
+ * e.g. getDeclaration(cssRoot, 'font-family').value -> 'Arial'
+ */
 function getDeclaration (cssNode, propertyName) {
   const declarations = getDeclarations(cssNode, propertyName);
   if (declarations.length === 0) {
@@ -107,7 +112,7 @@ test('should add font-face with fontNamePrefix', async (t) => {
     a {
       font-icon: url('./fixtures/account-494x512.svg')
     }
-  `, 'prefix-');
+  `, { fontNamePrefix: 'prefix-' });
   const fontDefinition = postcssResult.root.nodes[0];
   t.is(fontDefinition.type, 'atrule');
   t.is(fontDefinition.name, 'font-face');
@@ -205,6 +210,27 @@ test('should pass the svgs and font name to the iconfont-webpack-plugin loader',
   t.pass();
 });
 
+test('should pass the svgs and font name to the iconfont-webpack-plugin loader if css-modules are enabled', async (t) => {
+  const postcssResult = await processCss(`
+    a {
+      font-icon: url('./fixtures/account-494x512.svg')
+    }
+    p {
+      font-icon: url('./fixtures/account-494x512.svg')
+    }
+  `, { modules: true });
+  const fontDefinition = postcssResult.root.nodes[0];
+  const fontName = getDeclaration(fontDefinition, 'font-family').value;
+  const fontSrc = getDeclaration(fontDefinition, 'src').value;
+  const loaderOptions = {
+    svgs: [ 'fixtures/account-494x512.svg' ],
+    name: fontName
+  };
+  const expectedSrc = `url('!!iconfont-webpack-plugin/lib/loader.js?${JSON.stringify(loaderOptions)}!iconfont-webpack-plugin/placeholder.svg') format('woff')`;
+  t.is(fontSrc, expectedSrc);
+  t.pass();
+});
+
 test('should throw an error for url syntax errors', async (t) => {
   let error;
   try {