From 6dbf115299710dac1b32dcca5e38add83a7603d4 Mon Sep 17 00:00:00 2001 From: David Moreno Date: Mon, 11 Apr 2022 15:54:33 +0200 Subject: [PATCH] Generate the HTML file with the preload for the font #236 --- .../__tests__/__snapshots__/html.ts.snap | 2 ++ src/generators/asset-types/__tests__/html.ts | 6 +++- src/generators/asset-types/html.ts | 13 ++++++-- src/utils/__tests__/css.ts | 29 ++++++++++++++++- src/utils/css.ts | 31 +++++++++++++++---- templates/html.hbs | 4 +++ 6 files changed, 74 insertions(+), 11 deletions(-) diff --git a/src/generators/asset-types/__tests__/__snapshots__/html.ts.snap b/src/generators/asset-types/__tests__/__snapshots__/html.ts.snap index 95f53b7f..efc7d110 100644 --- a/src/generators/asset-types/__tests__/__snapshots__/html.ts.snap +++ b/src/generators/asset-types/__tests__/__snapshots__/html.ts.snap @@ -52,6 +52,8 @@ exports[`\`HTML\` asset generator renders HTML correctly with prefix and tag nam } + + diff --git a/src/generators/asset-types/__tests__/html.ts b/src/generators/asset-types/__tests__/html.ts index 1d7df909..46f0f0fd 100644 --- a/src/generators/asset-types/__tests__/html.ts +++ b/src/generators/asset-types/__tests__/html.ts @@ -11,9 +11,13 @@ const mockOptions = { } } as any; +jest.mock('../../../utils/css', () => ({ + renderUrlsAttribute: jest.fn(() => ['/fonts/bootstrap-icons.woff2' ]) +})); + describe('`HTML` asset generator', () => { test('renders HTML correctly with prefix and tag name options', async () => { - expect(await htmlGen.generate(mockOptions, null)).toMatchSnapshot(); + expect(await htmlGen.generate(mockOptions, Buffer.from(''))).toMatchSnapshot(); }); test('rendered HTML contains expected CSS path', async () => { diff --git a/src/generators/asset-types/html.ts b/src/generators/asset-types/html.ts index 67087801..2a5f0529 100644 --- a/src/generators/asset-types/html.ts +++ b/src/generators/asset-types/html.ts @@ -1,9 +1,16 @@ import { FontGenerator } from '../../types/generator'; +import { FontAssetType } from '../../types/misc'; import { renderTemplate } from '../../utils/template'; +import { renderUrlsAttribute } from '../../utils/css'; -const generator: FontGenerator = { - generate: async options => { - return renderTemplate(options.templates.html, options); +const generator: FontGenerator = { + dependsOn: FontAssetType.SVG, + + generate: async (options, svg: Buffer) => { + return renderTemplate(options.templates.html, { + ...options, + fontUrls: renderUrlsAttribute(options, svg) + }); } }; diff --git a/src/utils/__tests__/css.ts b/src/utils/__tests__/css.ts index e18e36fb..48487370 100644 --- a/src/utils/__tests__/css.ts +++ b/src/utils/__tests__/css.ts @@ -1,4 +1,4 @@ -import { renderSrcAttribute } from '../css'; +import { renderSrcAttribute, renderUrlsAttribute } from '../css'; import { FontAssetType } from '../../types/misc'; import * as hashUtils from '../hash'; @@ -32,6 +32,16 @@ describe('CSS utilities', () => { 'url("./my-font.svg?::hashed(::font-content::)::#my-font") format("svg")' ].join('\n') ); + + expect(renderUrlsAttribute(options as any, font)).toEqual( + [ + './my-font.eot?::hashed(::font-content::)::#iefix', + './my-font.woff2?::hashed(::font-content::)::', + './my-font.woff?::hashed(::font-content::)::', + './my-font.ttf?::hashed(::font-content::)::', + './my-font.svg?::hashed(::font-content::)::#my-font' + ] + ); }); it('only renders given font types', () => { @@ -47,6 +57,13 @@ describe('CSS utilities', () => { 'url("./my-font.svg?::hashed(::font-content::)::#my-font") format("svg")' ].join('\n') ); + + expect(renderUrlsAttribute(options as any, font)).toEqual( + [ + './my-font.eot?::hashed(::font-content::)::#iefix', + './my-font.svg?::hashed(::font-content::)::#my-font' + ] + ); }); it('uses the `fontsUrl` option when given', () => { @@ -60,6 +77,12 @@ describe('CSS utilities', () => { expect(renderSrcAttribute(options as any, font)).toEqual( 'url("/fonts/my-font.ttf?::hashed(::font-content::)::") format("truetype")' ); + + expect(renderUrlsAttribute(options as any, font)).toEqual( + [ + '/fonts/my-font.ttf?::hashed(::font-content::)::' + ] + ); }); it('uses the `fontsUrl` option when given with https:// path', () => { @@ -73,6 +96,10 @@ describe('CSS utilities', () => { expect(renderSrcAttribute(options as any, font)).toEqual( 'url("https://my-static.com/my-font.ttf?::hashed(::font-content::)::") format("truetype")' ); + + expect(renderUrlsAttribute(options as any, font)).toEqual( + [ 'https://my-static.com/my-font.ttf?::hashed(::font-content::)::' ] + ); }); }); }); diff --git a/src/utils/css.ts b/src/utils/css.ts index afbe76f2..1655bbb8 100644 --- a/src/utils/css.ts +++ b/src/utils/css.ts @@ -18,17 +18,36 @@ const renderSrcOptions: { [key in FontAssetType]: RenderSrcOptions } = { [FontAssetType.SVG]: { formatValue: 'svg', getSuffix: name => `#${name}` } }; +export const getUrl = ({ name, fontType, fontsUrl }: { name: string, fontType: FontAssetType, fontsUrl: string }, + font: string | Buffer) => { + + const { getSuffix } = renderSrcOptions[fontType]; + const hash = getHash(font.toString('utf8')); + const suffix = getSuffix ? getSuffix(name) : ''; + + return `${ + fontsUrl || '.' + }/${name}.${fontType}?${hash}${suffix}`; +} + export const renderSrcAttribute = ( { name, fontTypes, fontsUrl }: FontGeneratorOptions, font: string | Buffer ) => fontTypes .map(fontType => { - const { formatValue, getSuffix } = renderSrcOptions[fontType]; - const hash = getHash(font.toString('utf8')); - const suffix = getSuffix ? getSuffix(name) : ''; - return `url("${ - fontsUrl || '.' - }/${name}.${fontType}?${hash}${suffix}") format("${formatValue}")`; + const { formatValue } = renderSrcOptions[fontType]; + return `url("${getUrl({ name, fontType, fontsUrl }, font)}") format("${formatValue}")`; }) .join(',\n'); + +export const renderUrlsAttribute = ( + { name, fontTypes, fontsUrl }: FontGeneratorOptions, + font: string | Buffer + ) => + fontTypes + .map(fontType => { + const { formatValue } = renderSrcOptions[fontType]; + return `${getUrl({ name, fontType, fontsUrl }, font)}`; + }); + \ No newline at end of file diff --git a/templates/html.hbs b/templates/html.hbs index debe9367..460e46e9 100644 --- a/templates/html.hbs +++ b/templates/html.hbs @@ -49,6 +49,10 @@ } + {{# each fontUrls }} + + {{/ each }} +