feat: add css.hasTimestamp option. #250

jaywcjlove · Dec 5, 2024 · 8352115 · 8352115
1 parent c9a7855
commit 8352115
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -458,21 +458,27 @@ type CSSOptions = {
   /**
    * Setting font size.
    */
-  fontSize?: string;
+  fontSize?: string | boolean;
   /**
    * Set the path in the css file
    * https://github.com/jaywcjlove/svgtofont/issues/48#issuecomment-739547189
    */
-  cssPath?: string
+  cssPath?: string;
   /**
    * Set file name
    * https://github.com/jaywcjlove/svgtofont/issues/48#issuecomment-739547189
    */
-  fileName?: string
+  fileName?: string;
   /**
    * Ad hoc template variables.
    */
   templateVars?: Record<string, any>;
+  /**
+   * When including CSS files in a CSS file,
+   * you can add a timestamp parameter or custom text to the file path to prevent browser caching issues and ensure style updates are applied. @default true
+   * @example `path/to/iconfont.css?t=1612345678`
+   */
+  hasTimestamp?: boolean | string;
 }
 ```
 
@@ -583,6 +589,7 @@ Allows you to provide your own logging function. Set to `function(){}` to
 > Default value: `undefined` 
 
 Some options can be configured with `svgoOptions` though it. [svgo](https://github.com/svg/svgo#configuration)
+
 ### svg2ttf
 
 This is the setting for [svg2ttf](https://github.com/fontello/svg2ttf/tree/c33a126920f46b030e8ce960cc7a0e38a6946bbc#svg2ttfsvgfontstring-options---buf)

diff --git a/examples/example#211/.svgtofontrc.js b/examples/example#211/.svgtofontrc.js
@@ -4,4 +4,7 @@ import path from "path";
  */
 export default {
   fontName: "iconfont",
+  css: {
+    hasTimestamp: "v1.2.3"
+  }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -248,7 +248,7 @@ export default async (options: SvgToFontOptions = {}) => {
 
   options.svgicons2svgfont.fontName = options.fontName;
   options.classNamePrefix = options.classNamePrefix || options.fontName;
-  
+
   const excludeFormat = options.excludeFormat || [];
 
   const fontSizeOpt = typeof options.css !== 'boolean' && options.css.fontSize;
@@ -340,9 +340,10 @@ export default async (options: SvgToFontOptions = {}) => {
     if (options.css) {
       const styleTemplatePath = options.styleTemplates || path.resolve(__dirname, 'styles')
       const outDir = typeof options.css === 'object' ? options.css.output || options.dist : options.dist;
+      const hasTimestamp = typeof options.css === 'object' ? options.css.hasTimestamp : true;
 
       const cssOptions = typeof options.css === 'object' ? options.css : {};
-      const fontFamilyString = generateFontFaceCSS(options.fontName, cssOptions.cssPath || "", Date.now(), excludeFormat);
+      const fontFamilyString = generateFontFaceCSS(options.fontName, cssOptions.cssPath || "", Date.now(), excludeFormat, hasTimestamp);
 
       await copyTemplate(styleTemplatePath, outDir, {
         fontname: options.fontName,

diff --git a/src/utils.ts b/src/utils.ts
@@ -280,6 +280,12 @@ export type CSSOptions = {
    * Ad hoc template variables.
    */
   templateVars?: Record<string, any>;
+  /**
+   * When including CSS files in a CSS file,
+   * you can add a timestamp parameter or custom text to the file path to prevent browser caching issues and ensure style updates are applied. @default true
+   * @example `path/to/iconfont.css?t=1612345678`
+   */
+  hasTimestamp?: boolean | string;
 }
 
 // As we are processing css files, we need to eacape HTML entities.
@@ -327,7 +333,8 @@ export function createHTML(templatePath: string, data: Record<string, any>): str
   });
 };
 
-export function generateFontFaceCSS(fontName: string, cssPath: string, timestamp: number, excludeFormat: string[]): string {
+export function generateFontFaceCSS(fontName: string, cssPath: string, timestamp: number, excludeFormat: string[], hasTimestamp: boolean | string = true): string {
+  const timestamString = hasTimestamp === true ? `?t=${timestamp}` : (typeof hasTimestamp == 'string' ? `?t=${hasTimestamp}` : undefined);
   const formats = [
     { ext: 'eot', format: 'embedded-opentype', ieFix: true },
     { ext: 'woff2', format: 'woff2' },
@@ -337,16 +344,16 @@ export function generateFontFaceCSS(fontName: string, cssPath: string, timestamp
   ];
   let cssString = `  font-family: "${fontName}";\n`;
   if (!excludeFormat.includes('eot')) {
-    cssString += `  src: url('${cssPath}${fontName}.eot?t=${timestamp}'); /* IE9*/\n`;
+    cssString += `  src: url('${cssPath}${fontName}.eot${timestamString || ''}'); /* IE9*/\n`;
   }
   cssString += '  src: ';
   const srcParts = formats
     .filter(format => !excludeFormat.includes(format.ext))
     .map(format => {
       if (format.ext === 'eot') {
-        return `url('${cssPath}${fontName}.eot?t=${timestamp}#iefix') format('${format.format}') /* IE6-IE8 */`;
+        return `url('${cssPath}${fontName}.eot${timestamString || '?'}#iefix') format('${format.format}') /* IE6-IE8 */`;
       }
-      return `url('${cssPath}${fontName}.${format.ext}?t=${timestamp}') format('${format.format}')`;
+      return `url('${cssPath}${fontName}.${format.ext}${timestamString || ''}') format('${format.format}')`;
     });
   cssString += srcParts.join(',\n  ') + ';';
   return cssString;