Merge pull request #38 from Workshape/better-paths-and-css-selector-o…

…ption

Better understanding of paths, implement option for base selector and…

README.md

@@ -46,6 +46,7 @@ Options:
   -f, --fontspath  Relative path to fonts directory to use in output files (Default: ./)
   -c, --css        Generate CSS file if true (Default: true)
   --csspath        CSS output path (Defaults to <out>/<name>.css)
+  --cssfontsurl    CSS fonts directory url (Defaults to relative path)
   --csstp          CSS handlebars template path (Optional)
   --html           Generate HTML preview file if true (Default: true)
   --htmlpath       HTML output path (Defaults to <out>/<name>.html)
@@ -54,7 +55,8 @@ Options:
   -j, --json       Generate JSON map file if true (Default: true)
   --jsonpath       JSON output path (Defaults to <out>/<name>.json)
   -p, --prefix     CSS classname prefix for icons (Default: icon)
-  -t, --tag        CSS base selector for icons (Default: i)  
+  -t, --tag        CSS base tag for icons (Default: i)  
+  --selector       Use a selector instead of 'tag + prefix' (Default: null)
   --normalize      Normalize icons sizes (Default: false)
   --round          Setup SVG rounding (Default: 10e12)
   --descent        Offset applied to the baseline (Default: 0)

bin/icon-font-generator

@@ -29,6 +29,7 @@ function init() {
     types              : types,
     css                : args.c || args.css,
     cssPath            : args.csspath,
+    cssFontsUrl        : args.cssfontsurl,
     cssTemplate        : args.csstp,
     json               : args.j || args.json,
     jsonPath           : args.jsonpath,
@@ -40,6 +41,7 @@ function init() {
     codepoints         : args.codepoints,
     classPrefix        : args.p || args.prefix,
     baseTag            : args.t || args.tag,
+    baseSelector       : args.selector,
     normalize          : args.normalize,
     round              : args.round,
     descent            : args.descent,
@@ -110,6 +112,7 @@ function showHelp() {
     '  -c, --css        '.bold + 'Generate CSS file if true (Default: true)\n' +
     '  --types          '.bold + 'Comma delimited list of font types (Defaults to svg,ttf,woff,eot)\n' +
     '  --csspath        '.bold + 'CSS output path (Defaults to <out>/<name>.css)\n' +
+    '  --cssfontsurl    '.bold + 'CSS fonts directory url (Defaults to relative path)\n' +
     '  --csstp          '.bold + 'CSS handlebars template path (Optional)\n' +
     '  --html           '.bold + 'Generate HTML preview file if true (Default: true)\n' +
     '  --htmlpath       '.bold + 'HTML output path (Defaults to <out>/<name>.html)\n' +
@@ -119,7 +122,8 @@ function showHelp() {
     '  -j, --json       '.bold + 'Generate JSON map file if true (Default: true)\n' +
     '  --jsonpath       '.bold + 'JSON output path (Defaults to <out>/<name>.json)\n' +
     '  -p, --prefix     '.bold + 'CSS classname prefix for icons (Default: icon)\n' +
-    '  -t, --tag        '.bold + 'CSS base selector for icons (Default: i)' +
+    '  -t, --tag        '.bold + 'CSS base selector for icons (Default: i)\n' +
+    '  --selector       '.bold + 'Use a selector instead of \'tag + prefix\' (Default: null)\n' +
     '  --normalize      '.bold + 'Normalize icons sizes (Default: false)\n' +
     '  --round          '.bold + 'Setup SVG rounding (Default: 10e12)\n' +
     '  --descent        '.bold + 'Offset applied to the baseline (Default: 0)\n' +

lib/constants.js

@@ -25,7 +25,6 @@ const OPTIONAL_PARAMS = [
 
 const DEFAULT_OPTIONS = {
   fontName        : 'icons',
-  fontsPath       : './',
   css             : true,
   json            : true,
   html            : true,

lib/index.js

@@ -63,20 +63,27 @@ async function generate(options = {}) {
  * @return {void}
  */
 function getGeneratorConfig(options) {
+  const { tag, classNames } = parseSelector(options.baseSelector)
   const config = {
     files           : options.paths,
     dest            : options.outputDir,
-    cssFontsUrl     : options.fontsPath,
     types           : options.types,
     codepoints      : options.codepointsMap,
     startCodepoint  : options.startCodepoint || 0xF101,
     cssDest         : options.cssPath,
+    cssFontsUrl     : getCssFontsUrl(options),
     htmlDest        : options.htmlPath,
     cssTemplate     : options.cssTemplate  || TEMPLATES.css,
     htmlTemplate    : options.htmlTemplate || TEMPLATES.html,
     templateOptions : {
-      baseTag     : options.baseTag || 'i',
-      classPrefix : (options.classPrefix || 'icon') + '-'
+      baseTag             : tag || options.baseTag || 'i',
+      baseSelector        : options.baseSelector || null,
+      baseClassNames      : classNames.join(' '),
+      classPrefix         : (options.classPrefix || 'icon') + '-',
+      htmlCssRelativePath : path.relative(
+        path.dirname(getResolvedPath(options, 'html')),
+        getResolvedPath(options, 'css')
+      )
     }
   }
 
@@ -95,6 +102,44 @@ function getGeneratorConfig(options) {
   return config
 }
 
+/**
+ * Parse tag and classNames from given selector, if any are specified
+ *
+ * @param  {?String} selector
+ * @return {Object}
+ */
+function parseSelector(selector = '') {
+  const tagMatch = selector.match(/^[a-zA-Z0-9='"[\]_-]*/g)
+  const classNamesMatch = selector.match(/\.[a-zA-Z0-1_-]*/g)
+
+  return {
+    tag: tagMatch ? tagMatch[0] : undefined,
+    classNames: classNamesMatch ? classNamesMatch.map(cname => cname.substr(1)) : []
+  }
+}
+
+/**
+ * Based on given options, compute value that should be used as a base URL for font files from the generated CSS
+ *
+ * If a `cssFontsUrl` option is explicitally provided, it overrides default behaviour
+ *
+ * Else if the CSS was output at a custom filepath, compute a relative path from there
+ *
+ * Just return './' otherwise
+ *
+ * @param  {Object} options
+ * @return {void}
+ */
+function getCssFontsUrl(options) {
+  if (options.cssFontsUrl) {
+    return options.cssFontsUrl
+  } if (options.cssPath) {
+    return path.relative(path.dirname(options.cssPath), options.outputDir)
+  }
+
+  return './'
+}
+
 /**
  * Correctly parse codepoints map
  *
@@ -118,6 +163,23 @@ async function getCodepointsMap(filepath) {
   return codepointsMap
 }
 
+/**
+ * Assume the absolute path at which the file of given type should be written
+ *
+ * @param  {Object} options
+ * @param  {?String} type
+ * @return {void}
+ */
+function getResolvedPath(options, type = 'html') {
+  const explicitPathKey = `${ type }Path`
+
+  if (options[explicitPathKey]) {
+    return path.resolve(options[explicitPathKey])
+  }
+
+  return path.resolve(options.outputDir, `${ options.fontName }.${ type }`)
+}
+
 /**
  * Log report with all generated files and completion message
  *
@@ -132,17 +194,17 @@ function logReport(options) {
 
   // Log HTML file output
   if (options.html) {
-    logOutput(options, [ outputDir, options.htmlPath || `${ fontName }.html` ])
+    logOutput(options, [ getResolvedPath(options, 'html') ])
   }
 
   // Log CSS file output
   if (options.css) {
-    logOutput(options, [ outputDir, options.cssPath || `${ fontName }.css` ])
+    logOutput(options, [ getResolvedPath(options, 'css') ])
   }
 
+  // Log JSON map output
   if (options.json) {
-    // Log JSON map output
-    logOutput(options, [ outputDir, options.jsonPath || `${ fontName }.json` ])
+    logOutput(options, [ getResolvedPath(options, 'json') ])
   }
 
   // Log final message

package.json

@@ -1,6 +1,6 @@
 {
   "name": "icon-font-generator",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "description": "Easy-to-use, pre-configured cli tool to generate webfont icon kits from a bunch of .svg files",
   "main": "index.js",
   "repository": {

template/css.hbs

@@ -3,11 +3,11 @@
     src: {{{ src }}};
 }
 
-{{ baseTag }} {
-    line-height: 1;
-}
-
+{{# if baseSelector }}
+{{ baseSelector }}:before {
+{{ else }}
 {{ baseTag }}[class^="{{classPrefix}}"]:before, {{ baseTag }}[class*=" {{classPrefix}}"]:before {
+{{/ if }}
     font-family: {{ fontName }} !important;
     font-style: normal;
     font-weight: normal !important;
@@ -19,7 +19,11 @@
 }
 
 {{# each codepoints }}
-.{{ ../classPrefix }}{{ @key }}:before {
+{{# if ../baseSelector }}
+{{ ../baseSelector }}.{{ ../classPrefix }}{{ @key }}:before {
+{{ else }}
+{{ baseTag }}.{{ ../classPrefix }}{{ @key }}:before {
+{{/ if }}
     content: "\\{{ this }}";
 }
 {{/ each }}

template/html.hbs

@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>{{ fontName }}</title>
+
     <style>
 
         body {
@@ -51,10 +52,9 @@
             border-radius: 0 0 3px 3px;
             color: #666;
         }
-
-        {{{ styles }}}
-
     </style>
+
+    <link rel="stylesheet" type="text/css" href="{{ htmlCssRelativePath }}" />
 </head>
 <body>
 
@@ -64,7 +64,7 @@
 
         <div class="preview">
             <span class="inner">
-                <{{ ../baseTag }} class="{{ ../classPrefix }}{{ this }}"></{{ ../baseTag }}>
+                <{{ ../baseTag }} class="{{ ../baseClassNames }} {{ ../classPrefix }}{{ this }}"></{{ ../baseTag }}>
             </span>
             <br>
             <span class='label'>{{ this }}</span>