diff --git a/src/__tests__/standalone.test.js b/src/__tests__/standalone.test.js index 4b23f49c..f083a8b9 100644 --- a/src/__tests__/standalone.test.js +++ b/src/__tests__/standalone.test.js @@ -390,4 +390,16 @@ describe("standalone", () => { expect(Array.isArray(result.glyphsData)).toBe(true); expect(result.glyphsData.length > 0).toBe(true); }); + + it("should export `hash` in `result`", () => { + expect.assertions(1); + + return standalone({ + files: `${fixturesGlob}/svg-icons/**/*` + }).then(result => { + expect(result.hash).toBe("ead2b6f69fc603bf1cbd00bf9f8a8a33"); + + return result; + }); + }); }); diff --git a/src/cli.js b/src/cli.js index 1bbe7835..f608bab8 100644 --- a/src/cli.js +++ b/src/cli.js @@ -131,6 +131,10 @@ const cli = meow( --metadata Content of the metadata tag. + + --add-hash-in-font-url + + Generated font url will be : [webfont].[ext]?v=[hash] `, { autoHelp: false, @@ -215,6 +219,10 @@ const cli = meow( alias: "p", type: "string" }, + "add-hash-in-font-url": { + default: false, + type: "boolean" + }, verbose: { default: false, type: "boolean" @@ -333,6 +341,10 @@ if (cli.flags.sort === false) { optionsBase.sort = cli.flags.sort; } +if (cli.flags.addHashInFontUrl) { + optionsBase.addHashInFontUrl = cli.flags.addHashInFontUrl; +} + if (cli.flags.help || cli.flags.h) { cli.showHelp(); } @@ -387,6 +399,8 @@ Promise.resolve() path.basename(result.config.template).replace(".njk", "") ); } + + delete result.hash; } return Promise.resolve() diff --git a/src/standalone.js b/src/standalone.js index 87921315..f5a6ccd6 100644 --- a/src/standalone.js +++ b/src/standalone.js @@ -1,6 +1,7 @@ import { Readable } from "stream"; import fs from "fs"; import path from "path"; +import crypto from "crypto"; import SVGIcons2SVGFontStream from "svgicons2svgfont"; import cosmiconfig from "cosmiconfig"; import pLimit from "p-limit"; @@ -244,6 +245,11 @@ export default async function(initialOptions) { : {} ); + result.hash = crypto + .createHash("md5") + .update(result.svg) + .digest("hex"); + if (options.formats.includes("eot")) { result.eot = toEot(result.ttf); } @@ -283,6 +289,7 @@ export default async function(initialOptions) { templateFilePath = path.resolve(resolvedTemplateFilePath); } + const hashOption = options.addHashInFontUrl ? { hash: result.hash } : {}; const nunjucksOptions = deepmerge.all([ { glyphs: result.glyphsData.map(glyphData => { @@ -298,7 +305,8 @@ export default async function(initialOptions) { className: options.templateClassName || options.fontName, fontName: options.templateFontName || options.fontName, fontPath: options.templateFontPath.replace(/\/?$/, "/") - } + }, + hashOption ]); result.template = nunjucks.render(templateFilePath, nunjucksOptions); diff --git a/templates/template.css.njk b/templates/template.css.njk index f2e2590e..1aa4e8b7 100644 --- a/templates/template.css.njk +++ b/templates/template.css.njk @@ -4,7 +4,7 @@ font-weight: 400; font-display: auto; {% if formats.indexOf('eot')>-1 -%} - src: url("{{ fontPath }}{{ fontName }}.eot"); + src: url("{{ fontPath }}{{ fontName }}.eot{% if hash %}?v={{ hash }}{% endif %}"); {%- endif %} {%- set eotIndex = formats.indexOf('eot') -%} {%- set woff2Index = formats.indexOf('woff2') -%} @@ -12,27 +12,27 @@ {%- set ttfIndex = formats.indexOf('ttf') -%} {%- set svgIndex = formats.indexOf('svg') %} src: {% if eotIndex != -1 -%} - url("{{ fontPath }}{{ fontName }}.eot?#iefix") format("embedded-opentype") + url("{{ fontPath }}{{ fontName }}.eot?{% if hash %}v={{ hash }}{% endif %}#iefix") format("embedded-opentype") {%- set nothing = formats.splice(eotIndex, 1) -%} {%- if formats.length != 0 -%}, {% else -%}; {% endif -%} {%- endif -%} {%- if woff2Index != -1 -%} - url("{{ fontPath }}{{ fontName }}.woff2") format("woff2") + url("{{ fontPath }}{{ fontName }}.woff2{% if hash %}?v={{ hash }}{% endif %}") format("woff2") {%- set nothing = formats.splice(woff2Index, 1) -%} {%- if formats.length != 0 -%}, {% else -%}; {% endif -%} {%- endif -%} {%- if woffIndex != -1 -%} - url("{{ fontPath }}{{ fontName }}.woff") format("woff") + url("{{ fontPath }}{{ fontName }}.woff{% if hash %}?v={{ hash }}{% endif %}") format("woff") {%- set nothing = formats.splice(woffIndex, 1) -%} {%- if formats.length != 0 -%}, {% else -%}; {% endif -%} {%- endif -%} {%- if ttfIndex != -1 -%} - url("{{ fontPath }}{{ fontName }}.ttf") format("truetype") + url("{{ fontPath }}{{ fontName }}.ttf{% if hash %}?v={{ hash }}{% endif %}") format("truetype") {%- set nothing = formats.splice(ttfIndex, 1) -%} {%- if formats.length != 0 -%}, {% else -%}; {% endif -%} {%- endif -%} {%- if svgIndex != -1 -%} - url("{{ fontPath }}{{ fontName }}.svg#{{ fontName }}") format("svg"); + url("{{ fontPath }}{{ fontName }}.svg{% if hash %}?v={{ hash }}{% endif %}#{{ fontName }}") format("svg"); {%- endif %} } diff --git a/templates/template.html.njk b/templates/template.html.njk index 7088c1ea..f31ae7d3 100644 --- a/templates/template.html.njk +++ b/templates/template.html.njk @@ -51,7 +51,7 @@ font-weight: 400; font-display: auto; {% if formats.indexOf('eot')>-1 -%} - src: url("{{ fontPath }}{{ fontName }}.eot"); + src: url("{{ fontPath }}{{ fontName }}.eot{% if hash %}?v={{ hash }}{% endif %}"); {%- endif %} {%- set eotIndex = formats.indexOf('eot') -%} {%- set woff2Index = formats.indexOf('woff2') -%} @@ -59,27 +59,27 @@ {%- set ttfIndex = formats.indexOf('ttf') -%} {%- set svgIndex = formats.indexOf('svg') %} src: {% if eotIndex != -1 -%} - url("{{ fontPath }}{{ fontName }}.eot?#iefix") format("embedded-opentype") + url("{{ fontPath }}{{ fontName }}.eot?{% if hash %}v={{ hash }}{% endif %}#iefix") format("embedded-opentype") {%- set nothing = formats.splice(eotIndex, 1) -%} {%- if formats.length != 0 -%}, {% else -%}; {% endif -%} {%- endif -%} {%- if woff2Index != -1 -%} - url("{{ fontPath }}{{ fontName }}.woff2") format("woff2") + url("{{ fontPath }}{{ fontName }}.woff2{% if hash %}?v={{ hash }}{% endif %}") format("woff2") {%- set nothing = formats.splice(woff2Index, 1) -%} {%- if formats.length != 0 -%}, {% else -%}; {% endif -%} {%- endif -%} {%- if woffIndex != -1 -%} - url("{{ fontPath }}{{ fontName }}.woff") format("woff") + url("{{ fontPath }}{{ fontName }}.woff{% if hash %}?v={{ hash }}{% endif %}") format("woff") {%- set nothing = formats.splice(woffIndex, 1) -%} {%- if formats.length != 0 -%}, {% else -%}; {% endif -%} {%- endif -%} {%- if ttfIndex != -1 -%} - url("{{ fontPath }}{{ fontName }}.ttf") format("truetype") + url("{{ fontPath }}{{ fontName }}.ttf{% if hash %}?v={{ hash }}{% endif %}") format("truetype") {%- set nothing = formats.splice(ttfIndex, 1) -%} {%- if formats.length != 0 -%}, {% else -%}; {% endif -%} {%- endif -%} {%- if svgIndex != -1 -%} - url("{{ fontPath }}{{ fontName }}.svg#{{ fontName }}") format("svg"); + url("{{ fontPath }}{{ fontName }}.svg{% if hash %}?v={{ hash }}{% endif %}#{{ fontName }}") format("svg"); {%- endif %} } diff --git a/templates/template.scss.njk b/templates/template.scss.njk index fa094d05..bd8ce183 100644 --- a/templates/template.scss.njk +++ b/templates/template.scss.njk @@ -8,7 +8,7 @@ font-weight: 400; font-display: auto; {% if formats.indexOf('eot')>-1 -%} - src: url("{{ fontPath }}{{ fontName }}.eot"); + src: url("{{ fontPath }}{{ fontName }}.eot{% if hash %}?v={{ hash }}{% endif %}"); {%- endif -%} {%- set eotIndex = formats.indexOf('eot') -%} {%- set woff2Index = formats.indexOf('woff2') -%} @@ -16,27 +16,27 @@ {%- set ttfIndex = formats.indexOf('ttf') -%} {%- set svgIndex = formats.indexOf('svg') %} src: {% if eotIndex != -1 -%} - url("{{ fontPath }}{{ fontName }}.eot?#iefix") format("embedded-opentype") + url("{{ fontPath }}{{ fontName }}.eot?{% if hash %}v={{ hash }}{% endif %}#iefix") format("embedded-opentype") {%- set nothing = formats.splice(eotIndex, 1) -%} {%- if formats.length != 0 -%}, {% else -%}; {% endif -%} {%- endif -%} {%- if woff2Index != -1 -%} - url("{{ fontPath }}{{ fontName }}.woff2") format("woff2") + url("{{ fontPath }}{{ fontName }}.woff2{% if hash %}?v={{ hash }}{% endif %}") format("woff2") {%- set nothing = formats.splice(woff2Index, 1) -%} {%- if formats.length != 0 -%}, {% else -%}; {% endif -%} {%- endif -%} {%- if woffIndex != -1 -%} - url("{{ fontPath }}{{ fontName }}.woff") format("woff") + url("{{ fontPath }}{{ fontName }}.woff{% if hash %}?v={{ hash }}{% endif %}") format("woff") {%- set nothing = formats.splice(woffIndex, 1) -%} {%- if formats.length != 0 -%}, {% else -%}; {% endif -%} {%- endif -%} {%- if ttfIndex != -1 -%} - url("{{ fontPath }}{{ fontName }}.ttf") format("truetype") + url("{{ fontPath }}{{ fontName }}.ttf{% if hash %}?v={{ hash }}{% endif %}") format("truetype") {%- set nothing = formats.splice(ttfIndex, 1) -%} {%- if formats.length != 0 -%}, {% else -%}; {% endif -%} {%- endif -%} {%- if svgIndex != -1 -%} - url("{{ fontPath }}{{ fontName }}.svg#{{ fontName }}") format("svg"); + url("{{ fontPath }}{{ fontName }}.svg{% if hash %}?v={{ hash }}{% endif %}#{{ fontName }}") format("svg"); {%- endif %} }