diff --git a/lib/postcss-plugin.js b/lib/postcss-plugin.js index ca257ce..b1df3bc 100644 --- a/lib/postcss-plugin.js +++ b/lib/postcss-plugin.js @@ -20,17 +20,15 @@ function getUnresolvedIconPath (value) { function parseFontIconValue (value) { const valueParts = value.trim().split(' '); const result = {}; - // Just a url - // font-icon: url('./demo.svg'); - if (valueParts.length === 1) { - result.url = getUnresolvedIconPath(valueParts[0]); - } - // Font size and url + // Parse font size and url // font-icon: 20px url('./demo.svg'); if (valueParts.length === 2) { result.size = valueParts[0]; - result.url = getUnresolvedIconPath(valueParts[1]); } + // The url is always the last part + // font-icon: url('./demo.svg'); + // font-icon: 20px url('./demo.svg); + result.url = getUnresolvedIconPath(valueParts[valueParts.length - 1]); return result; } @@ -45,7 +43,7 @@ function getSvgPaths (postCssRoot, webpackResolve, context) { // Gather all font-icon urls: let unresolvedPaths = []; postCssRoot.walkDecls((decl) => { - if (decl.prop === 'font-icon') { + if (decl.prop === 'font-icon' || decl.prop === 'font-icon-glyph') { const fontIcon = parseFontIconValue(decl.value); unresolvedPaths.push(fontIcon.url); } @@ -83,21 +81,29 @@ function getSvgPaths (postCssRoot, webpackResolve, context) { */ function replaceIconFontDeclarations (fontName, postCssRoot, svgPaths) { postCssRoot.walkDecls((decl) => { + // Add font icon styles + // + text-rendering + // + -webkit-font-smoothing if (decl.prop === 'font-icon') { - const fontIcon = parseFontIconValue(decl.value); - // Add the font name + // Add font smoothing + // Similar to font Awesome + // https://github.com/FortAwesome/Font-Awesome/blob/31281606f5205b0191c17c3b4d2d56e1ddbb2dc6/web-fonts-with-css/css/fontawesome-all.css#L10-L15 decl.cloneBefore({ prop: 'text-rendering', value: 'auto' }); decl.cloneBefore({ prop: '-webkit-font-smoothing', - value: 'auto' + value: 'antialiased' }); decl.cloneBefore({ prop: '-moz-osx-font-smoothing', - value: 'auto' + value: 'grayscale' }); + } + // set content property + if (decl.prop === 'font-icon' || decl.prop === 'font-icon-glyph') { + const fontIcon = parseFontIconValue(decl.value); // If a font size is set we can use the font shorthand if (fontIcon.size) { decl.cloneBefore({