feat: Add font-icon-glyph (#12)

Seperate font smoothing and content

BREAKING CHANGE: Font smoothing is changed to improve the icon quality

#8

Author: jantimon

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({