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

* refactor: Remove Critters (perhaps temporarily) * docs: Adding changeset
preactjs · Jan 26, 2023 · 7c811ac · 7c811ac
1 parent 21c570f
commit 7c811ac
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 118 deletions.
diff --git a/.changeset/few-panthers-admire.md b/.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.
diff --git a/README.md b/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

diff --git a/packages/cli/package.json b/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",

diff --git a/packages/cli/src/index.js b/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(

diff --git a/packages/cli/src/lib/webpack/webpack-client-config.js b/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());
  }

diff --git a/packages/cli/tests/build.test.js b/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');

diff --git a/packages/cli/tests/images/build.js b/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>
 `;
diff --git a/yarn.lock b/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"
-
 [email protected]:
  version "3.1.5"
  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
@@ -3842,7 +3820,7 @@ [email protected]:
  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"
-
 [email protected]:
  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==