Revert "feat: use template engine for styles (#240)"

This reverts commit 668989e.
jaywcjlove · Aug 30, 2024 · fe666d3 · fe666d3
1 parent 668989e
commit fe666d3
Show file tree

Hide file tree

Showing 18 changed files with 218 additions and 133 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,7 +6,6 @@ examples/templates/dist
 examples/example#211/font
 lib
 package-lock.json
-yarn.lock
 __snapshots__
 
 ### Node ###

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

diff --git a/package.json b/package.json
@@ -81,12 +81,15 @@
     }
   },
   "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",
-    "nunjucks": "^3.2.4",
+    "move-file": "~3.1.0",
     "svg2ttf": "~6.0.3",
     "svgicons2svgfont": "~14.0.0",
     "svgo": "~3.3.0",
@@ -96,8 +99,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",

diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,5 @@
+/// <reference types="../src/types" />
+
 import path from 'path';
 import { fileURLToPath } from 'url';
 import fs from 'fs-extra';
@@ -258,7 +260,6 @@ 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[] = [];
@@ -321,17 +322,14 @@ export default async (options: SvgToFontOptions = {}) => {
     await createSvgSymbol(options);
 
     if (options.css) {
-      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, {
+      const styleTemplatePath = options.styleTemplates || (!options.useNameAsUnicode ? path.resolve(__dirname, 'styles') : path.resolve(__dirname, 'ligature-styles'));
+      await copyTemplate(styleTemplatePath, options.dist, {
         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 }
       });
     }
@@ -354,7 +352,7 @@ export default async (options: SvgToFontOptions = {}) => {
         if (name === 'symbol') symbolPath = _path;
       });
       // default template
-      options.website.template = options.website.template || path.join(__dirname, 'website', 'index.html');
+      options.website.template = options.website.template || path.join(__dirname, 'website', 'index.ejs');
       // template data
       const tempData: SvgToFontOptions['website'] & {
         fontname: string;
@@ -417,7 +415,6 @@ export default async (options: SvgToFontOptions = {}) => {
       log.log(`${color.green('SUCCESS')} Created React Native Components. `);
     }
 
-    return infoData;
   } catch (error) {
     log.log('SvgToFont:CLI:ERR:', error);
   }

diff --git a/src/ligature-styles/_{{filename}}.css b/src/ligature-styles/_{{filename}}.css
@@ -0,0 +1,19 @@
+@font-face {
+  font-family: "{{fontname}}";
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("{{cssPath}}{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
+  url("{{cssPath}}{{fontname}}.woff?t={{timestamp}}") format("woff"),
+  url('{{cssPath}}{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
+}
+
+.{{prefix}} {
+  font-family: '{{fontname}}' !important;{{fontSize}}
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+{{cssString}}
+
diff --git a/src/ligature-styles/_{{filename}}.less b/src/ligature-styles/_{{filename}}.less
@@ -0,0 +1,15 @@
+@font-face {font-family: "{{fontname}}";
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("{{cssPath}}{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
+  url("{{cssPath}}{{fontname}}.woff?t={{timestamp}}") format("woff"),
+  url('{{cssPath}}{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
+}
+
+.{{prefix}} {
+  font-family: '{{fontname}}' !important;{{fontSize}}
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/src/ligature-styles/_{{filename}}.module.less b/src/ligature-styles/_{{filename}}.module.less
@@ -0,0 +1,15 @@
+@font-face {font-family: "{{fontname}}";
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("{{cssPath}}{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
+  url("{{cssPath}}{{fontname}}.woff?t={{timestamp}}") format("woff"),
+  url('{{cssPath}}{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
+}
+
+.{{prefix}} {
+  font-family: '{{fontname}}' !important;{{fontSize}}
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/src/ligature-styles/_{{filename}}.scss b/src/ligature-styles/_{{filename}}.scss
@@ -0,0 +1,15 @@
+@font-face {font-family: "{{fontname}}";
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("{{cssPath}}{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
+  url("{{cssPath}}{{fontname}}.woff?t={{timestamp}}") format("woff"),
+  url('{{cssPath}}{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
+}
+
+.{{prefix}} {
+  font-family: '{{fontname}}' !important;{{fontSize}}
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/src/ligature-styles/_{{filename}}.styl b/src/ligature-styles/_{{filename}}.styl
@@ -0,0 +1,15 @@
+@font-face {font-family: "{{fontname}}";
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("{{cssPath}}{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
+  url("{{cssPath}}{{fontname}}.woff?t={{timestamp}}") format("woff"),
+  url('{{cssPath}}{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
+}
+
+.{{prefix}} {
+  font-family: '{{fontname}}' !important;{{fontSize}}
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/src/styles/_{{filename}}.css b/src/styles/_{{filename}}.css
@@ -8,13 +8,12 @@
   url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
 }
 
-{% if nameAsUnicode %}.{{prefix}}{% else %}[class^="{{prefix}}-"], [class*=" {{prefix}}-"]{% endif %} {
+[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
   font-family: '{{fontname}}' !important;{{fontSize}}
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-{% if not nameAsUnicode %}
+
 {{cssString}}
-{% endif %}
diff --git a/src/styles/_{{filename}}.less b/src/styles/_{{filename}}.less
@@ -7,13 +7,11 @@
   url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
 }
 
-{% if nameAsUnicode %}.{{prefix}}{% else %}[class^="{{prefix}}-"], [class*=" {{prefix}}-"]{% endif %} {
+[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
   font-family: '{{fontname}}' !important;{{fontSize}}
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-{% if not nameAsUnicode %}
-{{cssString}}
-{% endif %}
+{{cssString}}
diff --git a/src/styles/_{{filename}}.module.less b/src/styles/_{{filename}}.module.less
@@ -7,15 +7,13 @@
   url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
 }
 
-{% if nameAsUnicode %}.{{prefix}}{% else %}[class^="{{prefix}}-"], [class*=" {{prefix}}-"]{% endif %} {
+[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
   font-family: '{{fontname}}' !important;{{fontSize}}
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-{% if not nameAsUnicode %}
 :global {
 {{cssString}}
-}
-{% endif %}
+}
diff --git a/src/styles/_{{filename}}.scss b/src/styles/_{{filename}}.scss
@@ -7,16 +7,12 @@
   url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
 }
 
-{% if nameAsUnicode %}.{{prefix}}{% else %}[class^="{{prefix}}-"], [class*=" {{prefix}}-"]{% endif %} {
+[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
   font-family: '{{fontname}}' !important;{{fontSize}}
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-{% if not nameAsUnicode %}
-{{ cssString }}
-{% for name, value in infoData %}
-${{ name }}: {{ value.encodedCode }}
-{% endfor %}
-{% endif %}
+{{cssString}}
+{{cssToVars}}
diff --git a/src/styles/_{{filename}}.styl b/src/styles/_{{filename}}.styl
@@ -7,16 +7,11 @@
   url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
 }
 
-{% if nameAsUnicode %}.{{prefix}}{% else %}[class^="{{prefix}}-"], [class*=" {{prefix}}-"]{% endif %} {
+[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
   font-family: '{{fontname}}' !important;{{fontSize}}
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-{% if not nameAsUnicode %}
-{{ cssString }}
-{% for name, value in infoData %}
-${{ name }} = {{ value.encodedCode }}
-{% endfor %}
-{% endif %}
+{{cssString}}
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="node" />
+
+declare module '@tsbb/copy-template-dir' {
+  export default function(templateDir: string, targetDir: string, options: Record<string, any>, callback: (err: Error, createdFiles: string[]) => void): void;
+}