Skip to content

Commit

Permalink
fix: do not re-inline the inline stylesheets (fixes #19)
Browse files Browse the repository at this point in the history
  • Loading branch information
gajus committed Jul 13, 2017
1 parent 9a9f2fe commit 60ad77a
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 1 deletion.
24 changes: 23 additions & 1 deletion src/usus.js
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,14 @@ export const render = async (url: string, userConfiguration: UserConfigurationTy
});
}

const inlineStylesheetIndex = [];

CSS.styleSheetAdded(({header}) => {
if (header.isInline) {
inlineStylesheetIndex.push(header.styleSheetId);
}
});

CSS.startRuleUsageTracking();

Page.navigate({
Expand All @@ -164,6 +172,8 @@ export const render = async (url: string, userConfiguration: UserConfigurationTy

await delay(configuration.delay);

debug('inline stylesheets', inlineStylesheetIndex);

const rules = await CSS.takeCoverageDelta();

const usedRules = rules.coverage
Expand All @@ -174,6 +184,13 @@ export const render = async (url: string, userConfiguration: UserConfigurationTy
const slices = [];

for (const usedRule of usedRules) {
if (inlineStylesheetIndex.includes(usedRule.styleSheetId)) {
debug('skipping inline stylesheet %d', usedRule.styleSheetId);

// eslint-disable-next-line no-continue
continue;
}

const stylesheet = await CSS.getStyleSheetText({
styleSheetId: usedRule.styleSheetId
});
Expand Down Expand Up @@ -220,7 +237,10 @@ export const render = async (url: string, userConfiguration: UserConfigurationTy
await inlineStylePreload(DOM, Runtime, rootDocument.root.nodeId, styleImportLinks);
}

await inlineStyles(DOM, Runtime, rootDocument.root.nodeId, usedStyles);
if (usedStyles) {
await inlineStyles(DOM, Runtime, rootDocument.root.nodeId, usedStyles);
}

await inlineImports(DOM, Runtime, rootDocument.root.nodeId, styleImportLinks);

const rootOuterHTMLWithInlinedStyles = (await DOM.getOuterHTML({
Expand All @@ -235,6 +255,8 @@ export const render = async (url: string, userConfiguration: UserConfigurationTy
if (configuration.extractStyles) {
await chrome.kill();

// @todo Document that `extractStyles` does not return inline stylesheets.

return usedStyles;
}

Expand Down
40 changes: 40 additions & 0 deletions test/usus.js
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,46 @@ test('extracts CSS', async (t) => {
t.true(result.replace(/\s/g, '') === 'body{background:#f00;}');
});

test('does not re-inline the inline CSS', async (t) => {
const server = await serve(`
<html>
<head>
<style>
body {
background: #f00;
}
</style>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
`);

const result = await render(server.url, {
delay: 500,
inlineStyles: true,
preloadStyles: false
});

await server.close();

t.true(isHtmlEqual(result, `
<html>
<head>
<style>
body {
background: #f00;
}
</style>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
`));
});

test('extracts only the used CSS', async (t) => {
const styleServer = await serve(`
body {
Expand Down

0 comments on commit 60ad77a

Please sign in to comment.