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 }}
+