fix(postcss-plugin): Fix windows path issues

Author: jantimon

appveyor.yml

@@ -15,7 +15,7 @@ matrix:
 
 install:
   - ps: Install-Product node $env:nodejs_version
-  - npm install
+  - npm install --ignore-scripts
 
 test_script:
   - node --version

example/default/dist/styles.css

@@ -1,6 +1,6 @@
 @font-face {
-  font-family: Gc9ac7;
-  src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAAsAAAAABkwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIwleU9TLzIAAAFEAAAAPwAAAFYvsjszY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAJgAAACkgs5VC2hlYWQAAAJoAAAALQAAADYJNbL/aGhlYQAAApgAAAAeAAAAJAPxAe9obXR4AAACuAAAAAgAAAAIAe7//2xvY2EAAALAAAAABgAAAAYAUgAAbWF4cAAAAsgAAAAeAAAAIAENAEBuYW1lAAAC6AAAASkAAAIWm5e+CnBvc3QAAAQUAAAAGwAAACxqPAEEeJxjYGRgYOBiMGCwY2DKSSzJY+BzcfMJYZBiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCAClZBUgAeJxjYGT4zjiBgZWBgdGSMY2BgcEdSn9lkGRoYWBgYmBlZsAKAtJcUxgcHjA8AKoBAj0mZgZGIA3CDACcLwhKAHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nA2IQQ6CMBAAu9vSLVBaqVJMDxKNgWiMhpDQhAPc/IH//4I/0M4kcxgGvwR8kbOJsXGOyQ1W2HCKL4hTnPu0Vmh9BxZakhZkCu/Qt54yobWr902zxM6KijghAuXGPa7hdMxyiSC4kCqvrV4yVQgSrr6fn94YjjCstnchKOsqR6Uy+hNQFVRqVcK4u7xvhbYHz9gfcc4RpXicY2BkYGAA4pMeU0Tj+W2+MnAzMYDAFeGdcPo/EDB+YGIGcjkYwNIAMOQLpQAAAHicY2BkYGBiAAHGd//////H+IGBkQEVMAEAg2cF4gAAAAAAAAHu//8AAAAAAFIAAHicY2BkYGBgYjBhANEgFgMDFxAyMPwH8xkADasBTgAAeJxlkD1uwkAUhMdgSAJSghQpKbNVCiKZn5IDQE9Bl8KYtTGyvdZ6QaLLCXKEHCGniHKCHChj82hgLT9/M2/e7soABviFh3p5uG1qvVq4oTpxm/Qg7JOfhTvo40W4S38o3MMbpsJ9POKdO3j+HZ0BSuEW7vEh3Kb/KeyTv4Q7eMK3cJf+j3APK/wJ9/HqDdPIFLEp3FIn+yy0Z3n+rrStUlOoSTA+WwtdaBs6vVHro6oOydS5WMXW5GrOrs4yo0prdjpywda5cjYaxeIHkcmRIoJBgbipDktoJNgjQwh71b3UK6YtKvq1VpggwPgqtWCqaJIhlcaGyTWOrBUOPG1K1zGt+FrO5KS5zGreJCMr/u+6t6MT0Q+wbaZKzDDiE1/kg+YO+T89EV6oAAAAeJxjYGKAAFYG7ICJkYmRmYEp04CBAQADvgCsAA==") format('woff');
+  font-family: u84c0f;
+  src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAAsAAAAABkwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIwleU9TLzIAAAFEAAAAPwAAAFYvsjszY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAJgAAACkgs5VC2hlYWQAAAJoAAAALgAAADYJNjHZaGhlYQAAApgAAAAeAAAAJAPxAe9obXR4AAACuAAAAAgAAAAIAe7//2xvY2EAAALAAAAABgAAAAYAUgAAbWF4cAAAAsgAAAAeAAAAIAENAEBuYW1lAAAC6AAAASkAAAIWm5e+CnBvc3QAAAQUAAAAGwAAACxqPAEEeJxjYGRgYOBiMGCwY2DKSSzJY+BzcfMJYZBiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCAClZBUgAeJxjYGT4zjiBgZWBgdGSMY2BgcEdSn9lkGRoYWBgYmBlZsAKAtJcUxgcHjA8AKoBAj0mZgZGIA3CDACcLwhKAHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nA2IQQ6CMBAAu9vSLVBaqVJMDxKNgWiMhpDQhAPc/IH//4I/0M4kcxgGvwR8kbOJsXGOyQ1W2HCKL4hTnPu0Vmh9BxZakhZkCu/Qt54yobWr902zxM6KijghAuXGPa7hdMxyiSC4kCqvrV4yVQgSrr6fn94YjjCstnchKOsqR6Uy+hNQFVRqVcK4u7xvhbYHz9gfcc4RpXicY2BkYGAA4pPu0xLj+W2+MnAzMYDAFeEfuTD6PxAwfmBiBnI5GMDSAF05DUoAAHicY2BkYGBiAAHGd//////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;
 }
@@ -9,7 +9,7 @@ a:before {
   text-rendering: auto;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
-  font-family: Gc9ac7;
+  font-family: u84c0f;
   font-weight: normal;
   content: '\E000';
   transition: 0.5s color;
@@ -23,6 +23,6 @@ a:after {
   text-rendering: auto;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
-  font: normal normal normal 50%/1 Gc9ac7;
+  font: normal normal normal 50%/1 u84c0f;
   content: '\E000';
 }

example/default/webpack.config.js

@@ -1,9 +1,8 @@
 var path = require('path');
+var IconfontWebpackPlugin = require('../../');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
-var IconfontWebpackPlugin = require('../../');
 module.exports = {
-  context: __dirname,
   entry: './example.js',
   output: {
     path: path.join(__dirname, 'dist/'),
@@ -22,3 +21,8 @@ module.exports = {
     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/icons-to-woff.js

@@ -1,4 +1,5 @@
 var assert = require('assert');
+var path = require('path');
 var svgicons2svgfont = require('svgicons2svgfont');
 var svg2ttf = require('svg2ttf');
 var ttf2woff = require('ttf2woff');
@@ -12,7 +13,7 @@ var Readable = require('stream').Readable;
  */
 module.exports = function createIconFont (fs, icons, options) {
   assert(typeof options === 'object', 'Options are mandatory.');
-
+  icons = icons.map((iconPath) => path.resolve('.', iconPath));
   return new Promise((resolve, reject) => {
     var fontStream = svgicons2svgfont({
       name: options.name,
@@ -43,10 +44,10 @@ module.exports = function createIconFont (fs, icons, options) {
       };
       fontStream.write(glyph);
       fs.readFile(filename, function (err, result) {
-        result = result.toString();
         if (err) {
           return reject(err);
         }
+        result = result.toString();
         var iconHeight = getSvgHeight(result, filename);
         if (fontIconHeight && fontIconHeight !== iconHeight) {
           return reject(`SVG font generation failed as not all icons have the same height. ` +

lib/postcss-plugin.js

@@ -35,24 +35,37 @@ function parseFontIconValue (value) {
 }
 
 /**
- * Returns a promise with the result of all resolved svg paths of the given file
+ * Returns a promise with the result of all `icon-font:url(...)` svg paths of the given file
  *
  * @param fontName {string} The name of the font (font-family)
  * @param compiler {object} The webpack compiler instance
  * @param resolvedSvgs {string} The css loader path context to resolve relative urls
  */
 function getSvgPaths (postCssRoot, compiler, context) {
-  var relativePaths = [];
+  // Gather all font-icon urls:
+  var unresolvedPaths = [];
   postCssRoot.walkDecls((decl) => {
     if (decl.prop === 'font-icon') {
       var fontIcon = parseFontIconValue(decl.value);
-      relativePaths.push(fontIcon.url);
+      unresolvedPaths.push(fontIcon.url);
     }
   });
-  relativePaths = _.uniq(relativePaths);
-  return Promise.all(relativePaths.map((relativePath) =>
-    getResolvedFilename(relativePath, compiler, context))
-  ).then((resolvedFilenames) => ({unresolved: relativePaths, resolved: resolvedFilenames}));
+  // Remove duplicates
+  unresolvedPaths = _.uniq(unresolvedPaths);
+  // Resolve the urls to the absolute url
+  return Promise.all(unresolvedPaths.map((unresolvedPath) =>
+    getResolvedFilename(unresolvedPath, compiler, context))
+  )
+  .then((resolvedFilenames) => ({
+    // Original paths (unprocessed relative to the current css file context)
+    unresolved: unresolvedPaths,
+    // Absolute paths
+    resolved: resolvedFilenames,
+    // Relative unix paths (to the cwd)
+    relative: resolvedFilenames.map(
+      (resolvedPath) => path.relative('.', resolvedPath).replace(new RegExp('\\' + path.sep), '/')
+    )
+  }));
 }
 
 /**
@@ -109,13 +122,12 @@ function replaceIconFontDeclarations (fontName, postCssRoot, unresolvedSvgPaths)
  * @param postCssRoot {object} The postCss root object
  * @param resolvedSvgs {string[]} An array of absolute paths to svgs
  */
-function addFontDeclaration (fontName, postCssRoot, resolvedSvgs) {
+function addFontDeclaration (fontName, postCssRoot, resolvedRelativeSvgs) {
   // Turn paths into shorter relative paths
-  var relativeResolved = resolvedSvgs.map((absolute) => path.relative('.', absolute));
-  var options = { svgs: relativeResolved, name: fontName };
+  var options = { svgs: resolvedRelativeSvgs, name: fontName };
   // Use ~ to tell the loader-utils of the css loader that this is a webpack path
   // Use !! to tell webpack that we don't want any other loader to kick in
-  var url = '~!!' + require.resolve('./loader.js') + '?' + JSON.stringify(options) + '!' + require.resolve('../');
+  var url = '~!!iconfont-webpack-plugin/lib/loader.js?' + JSON.stringify(options) + '!iconfont-webpack-plugin';
   postCssRoot.prepend(postcss.parse(
     '@font-face { ' +
     'font-family: ' + fontName + '; src:url(\'' + url + '\') format(\'woff\');' +
@@ -142,15 +154,14 @@ module.exports = postcss.plugin('iconfont-webpack', function (config) {
         }
         // Generate a font icon name
         var md5sum = crypto.createHash('md5');
-        var cwd = config.compiler.context;
-        md5sum.update(JSON.stringify(_.values(svgPaths.resolved).map((svgPath) => path.relative(cwd, svgPath))));
+        md5sum.update(JSON.stringify(_.values(svgPaths.relative)));
         var fontName = md5sum.digest('hex').substr(0, 6);
         // Prefix the fontname with a letter as fonts with a leading number are not allowed
         fontName = String.fromCharCode(fontName.charCodeAt(0) + 20) + fontName.substr(1);
 
         // Update the css
         return Promise.all([
-          addFontDeclaration(fontName, root, svgPaths.resolved),
+          addFontDeclaration(fontName, root, svgPaths.relative),
           replaceIconFontDeclarations(fontName, root, svgPaths.unresolved)
         ]);
       });

node_modules/iconfont-webpack-plugin/index.js

@@ -169,7 +169,7 @@ test('should not create a font if there is no icon', async (t) => {
   t.pass();
 });
 
-test('should pass the svgs and font name tot the iconfont-webpack-plugin loader', async (t) => {
+test('should pass the svgs and font name to the iconfont-webpack-plugin loader', async (t) => {
   const postcssResult = await processCss(`
     a {
       font-icon: url('./fixtures/account-494x512.svg')
@@ -178,16 +178,14 @@ test('should pass the svgs and font name tot the iconfont-webpack-plugin loader'
       font-icon: url('./fixtures/account-494x512.svg')
     }
   `);
-  const indexFileName = require.resolve('../index.js');
-  const loaderFileName = require.resolve('../lib/loader.js');
   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('~!!${loaderFileName}?${JSON.stringify(loaderOptions)}!${indexFileName}') format('woff')`;
+  const expectedSrc = `url('~!!iconfont-webpack-plugin/lib/loader.js?${JSON.stringify(loaderOptions)}!iconfont-webpack-plugin') format('woff')`;
   t.is(fontSrc, expectedSrc);
   t.pass();
 });