refactor: Remove Critters (perhaps temporarily) (#1778)

* refactor: Remove Critters (perhaps temporarily)

* docs: Adding changeset

Author: rschristian

.changeset/few-panthers-admire.md

@@ -0,0 +1,9 @@
+---
+'preact-cli': major
+---
+
+Removes Critters which facilitates automatic CSS inlining in prod.
+
+Unfortunately Critters has not been updated for Webpack v5, resulting in a precarious dependency situation that causes issues for NPM users. As such, Critters will be removed for the time being.
+
+It may be updated or we may switch to a fork, but for now, it's causing issues and will require some work to correct.

README.md

@@ -113,7 +113,7 @@ $ [npm init / yarn create] preact-cli <template-name> <project-name>
 
 Create a production build
 
-You can disable `default: true` flags by prefixing them with `--no-<option>`; for example, `--no-sw`, `--no-prerender`, and `--no-inline-css`.
+You can disable `default: true` flags by prefixing them with `--no-<option>`; for example, `--no-sw` and `--no-prerender`.
 
 ```
 $ [npm run / yarn] preact build
@@ -126,7 +126,6 @@ $ [npm run / yarn] preact build
     --prerender        Renders route(s) into generated static HTML  (default true)
     --prerenderUrls    Path to pre-rendered routes config  (default prerender-urls.json)
     --template         Path to custom EJS or HTML template  (default 'src/template.ejs')
-    --inlineCss        Adds critical css to the prerendered markup  (default true)
     --analyze          Launch interactive Analyzer to inspect production bundle(s) (default false)
     -c, --config       Path to custom CLI config  (default preact.config.js)
     -v, --verbose      Verbose output

packages/cli/package.json

@@ -48,7 +48,6 @@
     "browserslist": "^4.20.3",
     "console-clear": "^1.0.0",
     "copy-webpack-plugin": "^9.1.0",
-    "critters-webpack-plugin": "^3.0.2",
     "css-loader": "^6.6.0",
     "css-minimizer-webpack-plugin": "3.4.1",
     "dotenv": "^16.0.0",

packages/cli/src/index.js

@@ -46,7 +46,6 @@ prog
 		'Path to prerendered routes config',
 		'prerender-urls.json'
 	)
-	.option('--inlineCss', 'Adds critical CSS to the prerendered HTML', true)
 	.option('-c, --config', 'Path to custom CLI config', 'preact.config.js')
 	.option('-v, --verbose', 'Verbose output', false)
 	.action(argv => exec(build(argv)));
@@ -85,9 +84,6 @@ prog
 	.action(() => exec(info()));
 
 prog.parse(process.argv, {
-	alias: {
-		inlineCss: ['inline-css'],
-	},
 	unknown: arg => {
 		const cmd = process.argv[2];
 		error(

packages/cli/src/lib/webpack/webpack-client-config.js

@@ -8,7 +8,6 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const CrittersPlugin = require('critters-webpack-plugin');
 const renderHTMLPlugin = require('./render-html-plugin');
 const baseConfig = require('./webpack-base-config');
 const { InjectManifest } = require('workbox-webpack-plugin');
@@ -190,17 +189,6 @@ function prodBuild(config) {
 		},
 	};
 
-	if (config.inlineCss) {
-		prodConfig.plugins.push(
-			new CrittersPlugin({
-				preload: 'media',
-				pruneSource: false,
-				logLevel: 'silent',
-				additionalStylesheets: ['route-*.css'],
-			})
-		);
-	}
-
 	if (config.analyze) {
 		prodConfig.plugins.push(new BundleAnalyzerPlugin());
 	}

packages/cli/tests/build.test.js

@@ -231,18 +231,6 @@ describe('preact build', () => {
 			).toBeUndefined();
 		});
 
-		it('--inlineCss', async () => {
-			let dir = await subject('minimal');
-
-			await buildFast(dir, { inlineCss: true });
-			let head = await getHead(dir);
-			expect(head).toMatch('<style>h1{color:red}</style>');
-
-			await buildFast(dir, { inlineCss: false });
-			head = await getOutputFile(dir, 'index.html');
-			expect(head).not.toMatch(/<style>[^<]*<\/style>/);
-		});
-
 		it('--config', async () => {
 			let dir = await subject('custom-webpack');
 
@@ -296,16 +284,6 @@ describe('preact build', () => {
 			expect(builtStylesheet).toMatch(/\.text__\w{5}{color:blue}/);
 		});
 
-		it('should inline critical CSS only', async () => {
-			let dir = await subject('css-inline');
-			await buildFast(dir);
-			const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/);
-			const html = await getOutputFile(dir, 'index.html');
-
-			expect(builtStylesheet).toMatch('h1{color:red}div{background:tan}');
-			expect(html).toMatch('<style>h1{color:red}</style>');
-		});
-
 		// Issue #1411
 		it('should preserve side-effectful CSS imports even if package.json claims no side effects', async () => {
 			let dir = await subject('css-side-effect');

packages/cli/tests/images/build.js

@@ -26,7 +26,7 @@ exports.default = {
 	'es-polyfills.js': 42690,
 
 	'favicon.ico': 15086,
-	'index.html': 3998,
+	'index.html': 1972,
 	'manifest.json': 455,
 	'preact_prerender_data.json': 11,
 
@@ -55,11 +55,7 @@ exports.prerender.heads.home = `
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<link rel="apple-touch-icon" href=\\"\\/assets\\/icons\\/apple-touch-icon\\.png\\">
 	<link rel="manifest" href="\\/manifest\\.json">
-	<style>html{padding:0}<\\/style>
-	<link href=\\"/bundle.\\w{5}.css\\" rel=\\"stylesheet\\" media=\\"print\\" onload=\\"this.media='all'\\">
-	<noscript>
-		<link rel=\\"stylesheet\\" href=\\"\\/bundle.\\w{5}.css\\">
-	</noscript>
+	<link href=\\"/bundle.\\w{5}.css\\" rel=\\"stylesheet\\">
 <\\/head>
 `;
 
@@ -72,11 +68,7 @@ exports.prerender.heads.route66 = `
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<link rel="apple-touch-icon" href=\\"\\/assets\\/icons\\/apple-touch-icon\\.png\\">
 	<link rel="manifest" href="\\/manifest\\.json">
-	<style>html{padding:0}<\\/style>
-	<link href=\\"/bundle.\\w{5}.css\\" rel=\\"stylesheet\\" media=\\"print\\" onload=\\"this.media='all'\\">
-	<noscript>
-		<link rel=\\"stylesheet\\" href=\\"\\/bundle.\\w{5}.css\\">
-	</noscript>
+	<link href=\\"/bundle.\\w{5}.css\\" rel=\\"stylesheet\\">
 <\\/head>
 `;
 
@@ -89,11 +81,7 @@ exports.prerender.heads.custom = `
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<link rel="apple-touch-icon" href=\\"\\/assets\\/icons\\/apple-touch-icon\\.png\\">
 	<link rel="manifest" href="\\/manifest\\.json">
-	<style>html{padding:0}<\\/style>
-	<link href=\\"/bundle.\\w{5}.css\\" rel=\\"stylesheet\\" media=\\"print\\" onload=\\"this.media='all'\\">
-	<noscript>
-		<link rel=\\"stylesheet\\" href=\\"\\/bundle.\\w{5}.css\\">
-	</noscript>
+	<link href=\\"/bundle.\\w{5}.css\\" rel=\\"stylesheet\\">
 <\\/head>
 `;
 
@@ -143,7 +131,7 @@ exports.prerender.htmlSafe = `
 `;
 
 exports.template = `
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
@@ -159,7 +147,7 @@ exports.template = `
 `;
 
 exports.publicPath = `
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
@@ -175,9 +163,9 @@ exports.publicPath = `
 		<h1>Public path test</h1>
 		<script type="__PREACT_CLI_DATA__">%7B%22preRenderData%22:%7B%22url%22:%22/%22%7D%7D</script>
 		<script type="module" src="/example-path/bundle.\\w{5}.js"></script>
-		<script nomodule="" src="/example-path/dom-polyfills.\\w{5}.js"></script>
-		<script nomodule="" src="/example-path/es-polyfills.js"></script>
-		<script nomodule="" defer="defer" src="/example-path/bundle.\\w{5}.legacy.js"></script>
+		<script nomodule src="/example-path/dom-polyfills.\\w{5}.js"></script>
+		<script nomodule src="/example-path/es-polyfills.js"></script>
+		<script nomodule defer="defer" src="/example-path/bundle.\\w{5}.legacy.js"></script>
 	</body>
 </html>
 `;

yarn.lock

@@ -3734,28 +3734,6 @@ create-error-class@^3.0.0:
   dependencies:
     capture-stack-trace "^1.0.0"
 
-critters-webpack-plugin@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/critters-webpack-plugin/-/critters-webpack-plugin-3.0.2.tgz#12cbd90310ea6a6050d73e49f27fe2e623e4a90d"
-  integrity sha512-WdGtrjfzTGTuLL1qR9yIrPvrF+r4Fq5MsI+hfjuujLRVzh5UOl1TPCdX4kJU12iK5LFHtbNtezcAJCaXpvozHA==
-  dependencies:
-    critters "^0.0.16"
-    minimatch "^3.0.4"
-    webpack-log "^3.0.1"
-    webpack-sources "^1.3.0"
-
-critters@^0.0.16:
-  version "0.0.16"
-  resolved "https://registry.yarnpkg.com/critters/-/critters-0.0.16.tgz#ffa2c5561a65b43c53b940036237ce72dcebfe93"
-  integrity sha512-JwjgmO6i3y6RWtLYmXwO5jMd+maZt8Tnfu7VVISmEWyQqfLpB8soBswf8/2bu6SBXxtKA68Al3c+qIG1ApT68A==
-  dependencies:
-    chalk "^4.1.0"
-    css-select "^4.2.0"
-    parse5 "^6.0.1"
-    parse5-htmlparser2-tree-adapter "^6.0.1"
-    postcss "^8.3.7"
-    pretty-bytes "^5.3.0"
-
 cross-fetch@3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
@@ -3842,7 +3820,7 @@ css-minimizer-webpack-plugin@3.4.1:
     serialize-javascript "^6.0.0"
     source-map "^0.6.1"
 
-css-select@^4.1.3, css-select@^4.2.0:
+css-select@^4.1.3:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.2.1.tgz#9e665d6ae4c7f9d65dbe69d0316e3221fb274cdd"
   integrity sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==
@@ -7603,11 +7581,6 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
-loglevelnext@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/loglevelnext/-/loglevelnext-3.0.1.tgz#e3e4659c4061c09264f6812c33586dc55a009a04"
-  integrity sha512-JpjaJhIN1reaSb26SIxDGtE0uc67gPl19OMVHrr+Ggt6b/Vy60jmCtKgQBrygAH0bhRA2nkxgDvM+8QvR8r0YA==
-
 loose-envify@^1.0.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -8041,11 +8014,6 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
   integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
 
-nanoid@^2.0.3:
-  version "2.1.11"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
-  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
-
 nanoid@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
@@ -8956,13 +8924,6 @@ parse-node-version@^1.0.1:
   resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
   integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
 
-parse5-htmlparser2-tree-adapter@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
-  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
-  dependencies:
-    parse5 "^6.0.1"
-
 parse5@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
@@ -8973,11 +8934,6 @@ parse5@^1.5.1:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
   integrity sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=
 
-parse5@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
-  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
-
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -9398,7 +9354,7 @@ postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss@^8.3.5, postcss@^8.3.7, postcss@^8.4.5:
+postcss@^8.3.5, postcss@^8.4.5:
   version "8.4.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
   integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
@@ -11935,15 +11891,6 @@ webpack-dev-server@^4.9.0:
     webpack-dev-middleware "^5.3.1"
     ws "^8.4.2"
 
-webpack-log@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-3.0.2.tgz#edf64fe4cabffeb04a03ca44d89f9908a4a9d238"
-  integrity sha512-ijm2zgqTY2omtlxRNrtDqxAQOrfAGMxWg9fQB/kuFSeZjx/OkYnfYLqsjf/JkrWOHINMzqxaJDXaog6Mx9KaHg==
-  dependencies:
-    chalk "^2.4.2"
-    loglevelnext "^3.0.1"
-    nanoid "^2.0.3"
-
 webpack-merge@^5.8.0:
   version "5.8.0"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"
@@ -11964,7 +11911,7 @@ webpack-remove-empty-scripts@^0.7.2:
   dependencies:
     ansis "^1.3.4"
 
-webpack-sources@^1.3.0, webpack-sources@^1.4.3:
+webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==