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

html-webpack-plugin V4 (third attempt) #84

Merged
merged 4 commits into from
Oct 22, 2021
Merged

html-webpack-plugin V4 (third attempt) #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
469185d
html-webpack-plugin V4 (third attempt)
developit Oct 22, 2021
d223289
update Critters
developit Oct 22, 2021
a9304c8
fix broken test assertion
developit Oct 22, 2021
cfc870a
Update test version of html-webpack-plugin to v4
developit Oct 22, 2021
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
6 changes: 3 additions & 3 deletions packages/critters-webpack-plugin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,12 @@
"devDependencies": {
"css-loader": "^4.2.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^3.2.0",
"html-webpack-plugin": "^4.5.2",
"mini-css-extract-plugin": "^0.10.0",
"webpack": "^4.6.0"
"webpack": "^4.46.0"
},
"dependencies": {
"critters": "^0.0.10",
"critters": "^0.0.13",
"minimatch": "^3.0.4",
"webpack-log": "^3.0.1",
"webpack-sources": "^1.3.0"
Expand Down
30 changes: 20 additions & 10 deletions packages/critters-webpack-plugin/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,23 @@ export default class CrittersWebpackPlugin extends Critters {
tap(compiler, 'compilation', PLUGIN_NAME, false, (compilation) => {
this.options.path = compiler.options.output.path;
this.options.publicPath = compiler.options.output.publicPath;
// ... which is how we get an "after" hook into html-webpack-plugin's HTML generation.

const hasHtmlPlugin = compilation.options.plugins.find(p => p.constructor && p.constructor.name === 'HtmlWebpackPlugin');
try {
var htmlPluginHooks = require('html-webpack-plugin').getHooks(compilation);
} catch (err) {}

const handleHtmlPluginData = (htmlPluginData, callback) => {
this.fs = compilation.outputFileSystem;
this.compilation = compilation;
this.process(htmlPluginData.html)
.then((html) => {
callback(null, { html });
})
.catch(callback);
};

// get an "after" hook into html-webpack-plugin's HTML generation.
if (
compilation.hooks &&
compilation.hooks.htmlWebpackPluginAfterHtmlProcessing
Expand All @@ -72,16 +88,10 @@ export default class CrittersWebpackPlugin extends Critters {
'html-webpack-plugin-after-html-processing',
PLUGIN_NAME,
true,
(htmlPluginData, callback) => {
this.fs = compilation.outputFileSystem;
this.compilation = compilation;
this.process(htmlPluginData.html)
.then((html) => {
callback(null, { html });
})
.catch(callback);
}
handleHtmlPluginData
);
} else if (hasHtmlPlugin && htmlPluginHooks) {
htmlPluginHooks.beforeEmit.tapAsync(PLUGIN_NAME, handleHtmlPluginData);
} else {
// If html-webpack-plugin isn't used, process the first HTML asset as an optimize step
tap(
Expand Down
10 changes: 5 additions & 5 deletions packages/critters-webpack-plugin/test/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ footer {
<h1>My first styled page</h1>
<p>Welcome to my styled page!</p>
<footer>Made 5 April 2004</footer>
<script type=\\"text/javascript\\" src=\\"bundle.js\\"></script>
<script src=\\"bundle.js\\"></script>

<link rel=\\"stylesheet\\" href=\\"main.css\\"></body></html>"
`;
Expand Down Expand Up @@ -156,7 +156,7 @@ exports[`Inline <style> pruning should remove unused rules 1`] = `
<h1>My first styled page</h1>
<p>Welcome to my styled page!</p>
<footer>Made 5 April 2004</footer>
<script type=\\"text/javascript\\" src=\\"bundle.js\\"></script>
<script src=\\"bundle.js\\"></script>

</body></html>"
`;
Expand Down Expand Up @@ -225,7 +225,7 @@ footer {
<h1>My first styled page</h1>
<p>Welcome to my styled page!</p>
<footer>Made 5 April 2004</footer>
<script type=\\"text/javascript\\" src=\\"bundle.js\\"></script>
<script src=\\"bundle.js\\"></script>

<link rel=\\"stylesheet\\" href=\\"main.css\\"></body></html>"
`;
Expand Down Expand Up @@ -294,7 +294,7 @@ footer {
<h1>My first styled page</h1>
<p>Welcome to my styled page!</p>
<footer>Made 5 April 2004</footer>
<script type=\\"text/javascript\\" src=\\"/_public/bundle.js\\"></script>
<script src=\\"/_public/bundle.js\\"></script>

<link rel=\\"stylesheet\\" href=\\"/_public/main.css\\"></body></html>"
`;
Expand Down Expand Up @@ -386,7 +386,7 @@ exports[`webpack compilation 1`] = `
<h1>My first styled page</h1>
<p>Welcome to my styled page!</p>
<footer>Made 5 April 2004</footer>
<script type=\\"text/javascript\\" src=\\"bundle.js\\"></script></body>
<script src=\\"bundle.js\\"></script></body>
</html>
"
`;
73 changes: 11 additions & 62 deletions packages/critters-webpack-plugin/test/__snapshots__/standalone.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,76 +26,25 @@ exports[`Usage without html-webpack-plugin should process the first html asset 2
`;

exports[`webpack compilation 1`] = `
"<!DOCTYPE html><html><head>
"<!DOCTYPE html>
<html>
<head>
<title>Basic Demo</title>
<style>
body {
padding-left: 11em;
font-family: \\"Times New Roman\\", times, serif;
color: purple;
background-color: #d8da3d;
}
ul.navbar {
list-style-type: none;
<style id=\\"unused\\">
.navbar {
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em;
}
</style>
<style id=\\"used\\">
h1 {
font-family: helvetica, arial, sans-serif;
}
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black;
}
ul.navbar a {
text-decoration: none;
}
ul.navbar:not(.hidden) li:hover a {
color: black;
}
ul.navbar:not(:hover) li:hover a {
color: black;
}
ul.navbar li:hover a {
color: red;
}
a:link {
color: blue;
}
a:visited {
color: purple;
}

footer {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted;
}

.clazz\\\\:colon {
color: green;
}
</style>
</head>
<body>
<ul class=\\"navbar clazz:colon\\">
<li>
<a href=\\"index.html\\">Home page</a>
</li>
<li>
<a href=\\"musings.html\\">Musings</a>
</li>
</ul>
<h1>My first styled page</h1>
<p>Welcome to my styled page!</p>
<footer>Made 5 April 2004</footer>
<script type=\\"text/javascript\\" src=\\"bundle.js\\"></script>

</body></html>"
<h1>Some HTML Here</h1>
</body>
</html>
"
`;
2 changes: 1 addition & 1 deletion packages/critters-webpack-plugin/test/standalone.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function configure(config) {
test('webpack compilation', async () => {
const info = await compile('fixtures/raw/index.js', configure);
expect(info.assets).toHaveLength(2);
expect(await readFile('fixtures/basic/dist/index.html')).toMatchSnapshot();
expect(await readFile('fixtures/raw/dist/index.html')).toMatchSnapshot();
});

describe('Usage without html-webpack-plugin', () => {
Expand Down
Loading