feat(postcss-plugin): Add font-size shorthand

Author: jantimon

README.md

@@ -67,6 +67,16 @@ a:hover:before {
 }
 ```
 
+## Icon sizes
+
+Shorthand for setting the icon size and the icon:
+
+```css
+a:before {
+  font-icon: 80% url('./account.svg');
+}
+```
+
 ## Should you use icon fonts for everything?
 
 No.

example/default/dist/styles.css

@@ -1,20 +1,28 @@
 @font-face {
   font-family: M6002e;
-  src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAAsAAAAABkwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIwleU9TLzIAAAFEAAAAPwAAAFYvsjszY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAJgAAACkgs5VC2hlYWQAAAJoAAAALgAAADYJHf2zaGhlYQAAApgAAAAeAAAAJAPxAe9obXR4AAACuAAAAAgAAAAIAe7//2xvY2EAAALAAAAABgAAAAYAUgAAbWF4cAAAAsgAAAAeAAAAIAENAEBuYW1lAAAC6AAAASkAAAIWm5e+CnBvc3QAAAQUAAAAGwAAACxqPAEEeJxjYGRgYOBiMGCwY2DKSSzJY+BzcfMJYZBiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCAClZBUgAeJxjYGT4zjiBgZWBgdGSMY2BgcEdSn9lkGRoYWBgYmBlZsAKAtJcUxgcHjA8AKoBAj0mZgZGIA3CDACcLwhKAHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nA2IQQ6CMBAAu9vSLVBaqVJMDxKNgWiMhpDQhAPc/IH//4I/0M4kcxgGvwR8kbOJsXGOyQ1W2HCKL4hTnPu0Vmh9BxZakhZkCu/Qt54yobWr902zxM6KijghAuXGPa7hdMxyiSC4kCqvrV4yVQgSrr6fn94YjjCstnchKOsqR6Uy+hNQFVRqVcK4u7xvhbYHz9gfcc4RpXicY2BkYGAA4pPl/9bG89t8ZeBmYgCBK+z3omD0fyBg/MDEDORyMIClAXmrDbwAAHicY2BkYGBiAAHGd//////H+IGBkQEVMAEAg2cF4gAAAAAAAAHu//8AAAAAAFIAAHicY2BkYGBgYjBhANEgFgMDFxAyMPwH8xkADasBTgAAeJxlkD1uwkAUhMdgSAJSghQpKbNVCiKZn5IDQE9Bl8KYtTGyvdZ6QaLLCXKEHCGniHKCHChj82hgLT9/M2/e7soABviFh3p5uG1qvVq4oTpxm/Qg7JOfhTvo40W4S38o3MMbpsJ9POKdO3j+HZ0BSuEW7vEh3Kb/KeyTv4Q7eMK3cJf+j3APK/wJ9/HqDdPIFLEp3FIn+yy0Z3n+rrStUlOoSTA+WwtdaBs6vVHro6oOydS5WMXW5GrOrs4yo0prdjpywda5cjYaxeIHkcmRIoJBgbipDktoJNgjQwh71b3UK6YtKvq1VpggwPgqtWCqaJIhlcaGyTWOrBUOPG1K1zGt+FrO5KS5zGreJCMr/u+6t6MT0Q+wbaZKzDDiE1/kg+YO+T89EV6oAAAAeJxjYGKAAFYG7ICJkYmRmYEp04CBAQADvgCsAA==") format('woff');
+  src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAAsAAAAABkwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIwleU9TLzIAAAFEAAAAPwAAAFYvsjszY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAJgAAACkgs5VC2hlYWQAAAJoAAAALgAAADYJHildaGhlYQAAApgAAAAeAAAAJAPxAe9obXR4AAACuAAAAAgAAAAIAe7//2xvY2EAAALAAAAABgAAAAYAUgAAbWF4cAAAAsgAAAAeAAAAIAENAEBuYW1lAAAC6AAAASkAAAIWm5e+CnBvc3QAAAQUAAAAGwAAACxqPAEEeJxjYGRgYOBiMGCwY2DKSSzJY+BzcfMJYZBiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCAClZBUgAeJxjYGT4zjiBgZWBgdGSMY2BgcEdSn9lkGRoYWBgYmBlZsAKAtJcUxgcHjA8AKoBAj0mZgZGIA3CDACcLwhKAHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nA2IQQ6CMBAAu9vSLVBaqVJMDxKNgWiMhpDQhAPc/IH//4I/0M4kcxgGvwR8kbOJsXGOyQ1W2HCKL4hTnPu0Vmh9BxZakhZkCu/Qt54yobWr902zxM6KijghAuXGPa7hdMxyiSC4kCqvrV4yVQgSrr6fn94YjjCstnchKOsqR6Uy+hNQFVRqVcK4u7xvhbYHz9gfcc4RpXicY2BkYGAA4pPlyyPj+W2+MnAzMYDAFfYv+jD6PxAwfmBiBnI5GMDSAFkBDOcAAHicY2BkYGBiAAHGd//////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 {
-  font-family: M6002e;
   text-rendering: auto;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
+  font-family: M6002e;
   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 M6002e;
+  content: '\E000';
 }

example/default/main.css

@@ -5,4 +5,8 @@ a:before {
 
 a:hover:before {
   color: red;
+}
+
+a:after {
+  font-icon: 50% url('./account.svg');
 }

lib/postcss-plugin.js

@@ -13,6 +13,23 @@ function getRelativeIconPath (value) {
   return relativePathResult ? (relativePathResult[2] || relativePathResult[3] || relativePathResult[4]) : undefined;
 }
 
+function parseFontIconValue (value) {
+  var valueParts = value.trim().split(' ');
+  var result = {};
+  // Just a url
+  // font-icon: url('./demo.svg');
+  if (valueParts.length === 1) {
+    result.url = getRelativeIconPath(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]);
+  }
+  return result;
+}
+
 /**
  * Returns a promise with the result of all resolved svg paths of the given file
  *
@@ -24,9 +41,9 @@ function getSvgPaths (postCssRoot, compiler, context) {
   var relativePaths = [];
   postCssRoot.walkDecls((decl) => {
     if (decl.prop === 'font-icon') {
-      var relativePath = getRelativeIconPath(decl.value);
-      if (relativePath) {
-        relativePaths.push(relativePath);
+      var fontIcon = parseFontIconValue(decl.value);
+      if (fontIcon.url) {
+        relativePaths.push(fontIcon.url);
       }
     }
   });
@@ -44,11 +61,8 @@ function getSvgPaths (postCssRoot, compiler, context) {
 function replaceIconFontDeclarations (fontName, postCssRoot, unresolvedSvgPaths) {
   postCssRoot.walkDecls((decl) => {
     if (decl.prop === 'font-icon') {
+      var fontIcon = parseFontIconValue(decl.value);
       // Add the font name
-      decl.cloneBefore({
-        prop: 'font-family',
-        value: fontName
-      });
       decl.cloneBefore({
         prop: 'text-rendering',
         value: 'auto'
@@ -61,10 +75,24 @@ function replaceIconFontDeclarations (fontName, postCssRoot, unresolvedSvgPaths)
         prop: '-moz-osx-font-smoothing',
         value: 'auto'
       });
-      decl.cloneBefore({
-        prop: 'font-weight',
-        value: 'normal'
-      });
+      // If a font size is set we can use the font shorthand
+      if (fontIcon.size) {
+        decl.cloneBefore({
+          prop: 'font',
+          value: `normal normal normal ${fontIcon.size}/1 ${fontName}`
+        });
+      }
+      // If no font size is set we use the font attributes
+      if (!fontIcon.size) {
+        decl.cloneBefore({
+          prop: 'font-family',
+          value: fontName
+        });
+        decl.cloneBefore({
+          prop: 'font-weight',
+          value: 'normal'
+        });
+      }
       // Look up the index of the svg in the array to generate the unicode char position
       var iconCharCode = unresolvedSvgPaths.indexOf(getRelativeIconPath(decl.value));
       decl.value = '\'\\e' + _.padStart(iconCharCode.toString(16), 3, '0') + '\'';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iconfont-webpack-plugin",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Simple icon font handling for webpack",
   "main": "index.js",
   "files": [