Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Generate the HTML file with the preload for the font #236 #376

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Generate the HTML file with the preload for the font #236 #376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/generators/asset-types/__tests__/__snapshots__/html.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@ exports[`\`HTML\` asset generator renders HTML correctly with prefix and tag nam
}
</style>

<link rel=\\"preload\\" href=\\"/fonts/bootstrap-icons.woff2\\" as=\\"font\\" type=\\"font/woff2\\" crossorigin>

<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"test-font.css\\" />
</head>
<body>
Expand Down
6 changes: 5 additions & 1 deletion src/generators/asset-types/__tests__/html.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
13 changes: 10 additions & 3 deletions src/generators/asset-types/html.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<Buffer> = {
dependsOn: FontAssetType.SVG,

generate: async (options, svg: Buffer) => {
return renderTemplate(options.templates.html, {
...options,
fontUrls: renderUrlsAttribute(options, svg)
});
}
};

Expand Down
29 changes: 28 additions & 1 deletion src/utils/__tests__/css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { renderSrcAttribute } from '../css';
import { renderSrcAttribute, renderUrlsAttribute } from '../css';
import { FontAssetType } from '../../types/misc';
import * as hashUtils from '../hash';

Expand Down Expand Up @@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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::)::' ]
);
});
});
});
31 changes: 25 additions & 6 deletions src/utils/css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}`;
});

4 changes: 4 additions & 0 deletions templates/html.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@
}
</style>

{{# each fontUrls }}
<link rel="preload" href="{{ this }}" as="font" type="font/woff2" crossorigin>
{{/ each }}

<link rel="stylesheet" type="text/css" href="{{ name }}.css" />
</head>
<body>
Expand Down