feat: use template engine for styles #240 (#242)

* feat: use template engine for styles

* fix footer links

* fix style variables

* fix templates & add prefix for css variables

* update readme links

.gitignore

@@ -6,6 +6,7 @@ examples/templates/dist
 examples/example#211/font
 lib
 package-lock.json
+yarn.lock
 __snapshots__
 
 ### Node ###

README.md

@@ -655,14 +655,14 @@ Define preview web content. Example:
 #### website.template
 
 > Type: `String`  
-> Default value: [index.ejs](src/website/index.ejs)  
+> Default value: [index.njk](src/website/index.njk)  
 
-Custom template can customize parameters. You can define your own template based on the [default template](src/website/index.ejs).
+Custom template can customize parameters. You can define your own template based on the [default template](src/website/index.njk).
 
 ```js
 {
   website: {
-    template: path.join(process.cwd(), "my-template.ejs")
+    template: path.join(process.cwd(), "my-template.njk")
   }
 }
 ```

package.json

@@ -81,15 +81,12 @@
     }
   },
   "dependencies": {
-    "@tsbb/copy-template-dir": "^1.4.0",
     "auto-config-loader": "^1.7.4",
     "cheerio": "~1.0.0-rc.12",
     "colors-cli": "~1.0.28",
-    "del": "~7.1.0",
-    "ejs": "~3.1.6",
     "fs-extra": "~11.2.0",
     "image2uri": "^2.1.2",
-    "move-file": "~3.1.0",
+    "nunjucks": "^3.2.4",
     "svg2ttf": "~6.0.3",
     "svgicons2svgfont": "~14.0.0",
     "svgo": "~3.3.0",
@@ -99,8 +96,8 @@
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@types/ejs": "~3.1.0",
     "@types/fs-extra": "^11.0.1",
+    "@types/nunjucks": "^3.2.6",
     "@types/svg2ttf": "~5.0.1",
     "@types/ttf2eot": "~2.0.0",
     "@types/ttf2woff": "~2.0.2",

src/index.ts

@@ -1,5 +1,3 @@
-/// <reference types="../src/types" />
-
 import path from 'path';
 import { fileURLToPath } from 'url';
 import fs from 'fs-extra';
@@ -260,6 +258,7 @@ export default async (options: SvgToFontOptions = {}) => {
     await fs.ensureDir(options.dist);
     const unicodeObject = await createSVG(options);
 
+    /** @deprecated */
     let cssToVars: string[] = [];
     let cssString: string[] = [];
     let cssRootVars: string[] = [];
@@ -322,14 +321,17 @@ export default async (options: SvgToFontOptions = {}) => {
     await createSvgSymbol(options);
 
     if (options.css) {
-      const styleTemplatePath = options.styleTemplates || (!options.useNameAsUnicode ? path.resolve(__dirname, 'styles') : path.resolve(__dirname, 'ligature-styles'));
-      await copyTemplate(styleTemplatePath, options.dist, {
+      const styleTemplatePath = options.styleTemplates || path.resolve(__dirname, 'styles')
+      const outDir = typeof options.css === 'object' ? options.css.output || options.dist : options.dist;
+      await copyTemplate(styleTemplatePath, outDir, {
         fontname: options.fontName,
         cssString: cssString.join(''),
         cssToVars: cssToVars.join(''),
+        infoData,
         fontSize: fontSize,
         timestamp: new Date().getTime(),
         prefix,
+        nameAsUnicode: options.useNameAsUnicode,
         _opts: typeof options.css === 'boolean' ? {} : { ...options.css }
       });
     }
@@ -352,7 +354,7 @@ export default async (options: SvgToFontOptions = {}) => {
         if (name === 'symbol') symbolPath = _path;
       });
       // default template
-      options.website.template = options.website.template || path.join(__dirname, 'website', 'index.ejs');
+      options.website.template = options.website.template || path.join(__dirname, 'website', 'index.njk');
       // template data
       const tempData: SvgToFontOptions['website'] & {
         fontname: string;
@@ -415,6 +417,7 @@ export default async (options: SvgToFontOptions = {}) => {
       log.log(`${color.green('SUCCESS')} Created React Native Components. `);
     }
 
+    return infoData;
   } catch (error) {
     log.log('SvgToFont:CLI:ERR:', error);
   }

src/styles/_{{filename}}.css

@@ -8,12 +8,13 @@
   url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
 }
 
-[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
+{% if nameAsUnicode %}.{{prefix}}{% else %}[class^="{{prefix}}-"], [class*=" {{prefix}}-"]{% endif %} {
   font-family: '{{fontname}}' !important;{{fontSize}}
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-
+{% if not nameAsUnicode %}
 {{cssString}}
+{% endif %}

src/styles/_{{filename}}.less

@@ -7,11 +7,13 @@
   url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
 }
 
-[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
+{% if nameAsUnicode %}.{{prefix}}{% else %}[class^="{{prefix}}-"], [class*=" {{prefix}}-"]{% endif %} {
   font-family: '{{fontname}}' !important;{{fontSize}}
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-{{cssString}}
+{% if not nameAsUnicode %}
+{{cssString}}
+{% endif %}

src/styles/_{{filename}}.module.less

@@ -7,13 +7,15 @@
   url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
 }
 
-[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
+{% if nameAsUnicode %}.{{prefix}}{% else %}[class^="{{prefix}}-"], [class*=" {{prefix}}-"]{% endif %} {
   font-family: '{{fontname}}' !important;{{fontSize}}
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+{% if not nameAsUnicode %}
 :global {
 {{cssString}}
-}
+}
+{% endif %}

src/styles/_{{filename}}.scss

@@ -7,12 +7,16 @@
   url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
 }
 
-[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
+{% if nameAsUnicode %}.{{prefix}}{% else %}[class^="{{prefix}}-"], [class*=" {{prefix}}-"]{% endif %} {
   font-family: '{{fontname}}' !important;{{fontSize}}
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-{{cssString}}
-{{cssToVars}}
+{% if not nameAsUnicode %}
+{{ cssString }}
+{% for name, value in infoData %}
+${{prefix}}-{{ name }}: '{{ value.encodedCode }}';
+{%- endfor %}
+{% endif %}

src/styles/_{{filename}}.styl

@@ -7,11 +7,16 @@
   url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
 }
 
-[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
+{% if nameAsUnicode %}.{{prefix}}{% else %}[class^="{{prefix}}-"], [class*=" {{prefix}}-"]{% endif %} {
   font-family: '{{fontname}}' !important;{{fontSize}}
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-{{cssString}}
+{% if not nameAsUnicode %}
+{{ cssString }}
+{% for name, value in infoData %}
+${{prefix}}-{{ name }} = '{{ value.encodedCode }}'
+{%- endfor %}
+{% endif %}