Skip to content

Commit

Permalink
refactor: Remove Critters (perhaps temporarily) (#1778)
Browse files Browse the repository at this point in the history
* refactor: Remove Critters (perhaps temporarily)

* docs: Adding changeset
  • Loading branch information
rschristian committed Jan 26, 2023
1 parent ca85171 commit 8370d7c
Show file tree
Hide file tree
Showing 8 changed files with 35 additions and 141 deletions.
9 changes: 9 additions & 0 deletions .changeset/few-panthers-admire.md
Original file line number Diff line number Diff line change
@@ -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.
3 changes: 1 addition & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,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
Expand All @@ -134,7 +134,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
Expand Down
1 change: 0 additions & 1 deletion packages/cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 0 additions & 4 deletions packages/cli/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,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)));
Expand Down Expand Up @@ -81,9 +80,6 @@ prog
.action(() => exec(info()));

prog.parse(process.argv, {
alias: {
inlineCss: ['inline-css'],
},
unknown: arg => {
const cmd = process.argv[2];
error(
Expand Down
12 changes: 0 additions & 12 deletions packages/cli/src/lib/webpack/webpack-client-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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());
}
Expand Down
22 changes: 0 additions & 22 deletions packages/cli/tests/build.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down Expand Up @@ -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');
Expand Down
30 changes: 9 additions & 21 deletions packages/cli/tests/images/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ exports.default = {
'es-polyfills.js': 46419,

'favicon.ico': 15086,
'index.html': 3998,
'index.html': 1972,
'manifest.json': 455,
'preact_prerender_data.json': 11,

Expand Down Expand Up @@ -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>
`;

Expand All @@ -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>
`;

Expand All @@ -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>
`;

Expand Down Expand Up @@ -143,7 +131,7 @@ exports.prerender.htmlSafe = `
`;

exports.template = `
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
Expand All @@ -159,7 +147,7 @@ exports.template = `
`;

exports.publicPath = `
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
Expand All @@ -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>
`;
95 changes: 16 additions & 79 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3750,28 +3750,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"
Expand Down Expand Up @@ -3856,7 +3834,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==
Expand Down Expand Up @@ -7671,11 +7649,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"
Expand Down Expand Up @@ -8118,16 +8091,6 @@ nan@^2.12.1:
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==

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.1.30:
version "3.1.30"
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==

nanoid@^3.3.3:
version "3.3.4"
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
Expand Down Expand Up @@ -9043,13 +9006,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"
Expand All @@ -9060,11 +9016,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"
Expand Down Expand Up @@ -9494,24 +9445,15 @@ postcss-value-parser@^4.2.0:
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==

postcss@^8.3.5, postcss@^8.4.21:
version "8.4.31"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
postcss@^8.3.5:
version "8.4.6"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
dependencies:
nanoid "^3.3.6"
nanoid "^3.2.0"
picocolors "^1.0.0"
source-map-js "^1.0.2"

postcss@^8.3.7:
version "8.3.11"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.11.tgz#c3beca7ea811cd5e1c4a3ec6d2e7599ef1f8f858"
integrity sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==
dependencies:
nanoid "^3.1.30"
picocolors "^1.0.0"
source-map-js "^0.6.2"

postcss@^8.4.13:
version "8.4.13"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.13.tgz#7c87bc268e79f7f86524235821dfdf9f73e5d575"
Expand All @@ -9521,6 +9463,15 @@ postcss@^8.4.13:
picocolors "^1.0.0"
source-map-js "^1.0.2"

postcss@^8.4.21:
version "8.4.31"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
dependencies:
nanoid "^3.3.6"
picocolors "^1.0.0"
source-map-js "^1.0.2"

preact-render-to-string@^5.2.6:
version "5.2.6"
resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz#0ff0c86cd118d30affb825193f18e92bd59d0604"
Expand Down Expand Up @@ -10843,11 +10794,6 @@ source-list-map@^2.0.0:
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==

source-map-js@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==

source-map-loader@^1.1.1:
version "1.1.3"
resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-1.1.3.tgz#7dbc2fe7ea09d3e43c51fd9fc478b7f016c1f820"
Expand Down Expand Up @@ -12119,15 +12065,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"
Expand All @@ -12143,7 +12080,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==
Expand Down

0 comments on commit 8370d7c

Please sign in to comment.