feat: adjust css var handling (#203)

jaywcjlove · May 16, 2023 · 069b086 · 069b086
1 parent 797b748
commit 069b086
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 6 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -104,6 +104,11 @@ export type SvgToFontOptions = {
    * @default false
    */
   useNameAsUnicode?: boolean;
+  /**
+   * consoles whenever {{ cssString }} template outputs unicode characters or css vars 
+   * @default false
+   */
+  useCSSVars?: boolean;
   /**
    * Clear output directory contents
    * @default false
@@ -243,14 +248,16 @@ export default async (options: SvgToFontOptions = {}) => {
     await fs.ensureDir(options.dist);
     const unicodeObject = await createSVG(options);
 
-    let cssString: string[] = [];
     let cssToVars: string[] = [];
+    let cssString: string[] = [];
+    let cssRootVars: string[] = [];
     let cssIconHtml: string[] = [];
     let unicodeHtml: string[] = [];
     let symbolHtml: string[] = [];
     const prefix = options.classNamePrefix || options.fontName;
     const infoData: InfoData = {}
-    Object.keys(unicodeObject).forEach(name => {
+
+    Object.keys(unicodeObject).forEach((name, index, self) => {
       if (!infoData[name]) infoData[name] = {};
       const _code = unicodeObject[name];
       let symbolName = options.classNamePrefix + options.symbolNameDelimiter + name
@@ -262,8 +269,15 @@ export default async (options: SvgToFontOptions = {}) => {
         iconPart = prefix + '">' + name;
         encodedCodes = _code.split('').map(x => x.charCodeAt(0)).join(';&amp;#');
       } else {
-        cssString.push(`.${symbolName}:before { content: "\\${encodedCodes.toString(16)}"; }\n`);
         cssToVars.push(`$${symbolName}: "\\${encodedCodes.toString(16)}";\n`);
+        if (options.useCSSVars) {
+          if (index === 0) cssRootVars.push(`:root {\n`)
+          cssRootVars.push(`--${symbolName}: "\\${encodedCodes.toString(16)}";\n`);
+          cssString.push(`.${symbolName}:before { content: var(--${symbolName}); }\n`);
+          if (index === self.length - 1) cssRootVars.push(`}\n`)
+        } else {
+          cssString.push(`.${symbolName}:before { content: "\\${encodedCodes.toString(16)}"; }\n`);
+        }
       }
       infoData[name].encodedCode = `\\${encodedCodes.toString(16)}`;
       infoData[name].prefix = prefix;
@@ -280,6 +294,11 @@ export default async (options: SvgToFontOptions = {}) => {
         </li>
       `);
     });
+
+    if (options.useCSSVars) {
+      cssString = [...cssRootVars, ...cssString]
+    }
+
     if (options.generateInfoData) {
       await fs.writeJSON(infoDataPath, infoData, { spaces: 2 });
       log.log(`${color.green('SUCCESS')} Created ${infoDataPath} `);

diff --git a/src/ligature-styles/_{{filename}}.css b/src/ligature-styles/_{{filename}}.css
@@ -15,3 +15,6 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+{{cssString}}
+
diff --git a/src/styles/_{{filename}}.css b/src/styles/_{{filename}}.css
@@ -17,4 +17,4 @@
 }
 
 
-{{cssString}}
+{{cssString}}
diff --git a/test/templates/index.js b/test/templates/index.js
@@ -61,6 +61,9 @@ svgtofont({
         url: "index.html"
       }
     ],
+    options: {
+      useCSSVars: true,
+    },
     footerInfo: `Licensed under MIT. (Yes it's free and <a target="_blank" href="https://github.com/jaywcjlove/svgtofont">open-sourced</a>)`
   }
 })

diff --git a/test/templates/styles/_{{filename}}.css.template b/test/templates/styles/_{{filename}}.css.template
@@ -17,5 +17,4 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-
-{{cssString}}
+{{cssString}}