Inline CSS fixes (#908)

* bumping version

* fixing critters bug and upgrading critters

* fixing tests and silencing critters

* fixing critters options

* removing unwanted changes

* updating critters

Author: prateekbh

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

@@ -283,7 +283,13 @@ function isProd(config) {
 	}
 
 	if (config['inline-css']) {
-		prodConfig.plugins.push(new CrittersPlugin());
+		prodConfig.plugins.push(
+			new CrittersPlugin({
+				pruneSource: false,
+				logLevel: 'silent',
+				additionalStylesheets: ['*.css'],
+			})
+		);
 	}
 
 	if (config.analyze) {

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "preact-cli",
-  "version": "3.0.0-rc.5",
+  "version": "3.0.0-rc.6",
   "description": "Start building a Preact Progressive Web App in seconds.",
   "repository": "developit/preact-cli",
   "main": "lib/index.js",
@@ -86,7 +86,7 @@
     "compression-webpack-plugin": "^3.0.0",
     "console-clear": "^1.0.0",
     "copy-webpack-plugin": "^5.0.4",
-    "critters-webpack-plugin": "^1.3.3",
+    "critters-webpack-plugin": "^2.5.0",
     "cross-spawn-promise": "^0.10.1",
     "css-loader": "^3.1.0",
     "ejs-loader": "^0.3.3",

packages/cli/tests/images/build.js

@@ -47,8 +47,8 @@ exports.prerender.heads.home = `
 	<meta name="mobile-web-app-capable" content="yes">
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<link rel="manifest" href="\\/manifest\\.json">
+	<style>html{padding:0}<\\/style>
 	<link href=\\"/bundle.\\w{5}.css\\" rel=\\"preload\\" as=\\"style\\">
-	<style>html{padding:0;}<\\/style>
 <\\/head>
 `;
 
@@ -60,8 +60,8 @@ exports.prerender.heads.route66 = `
 	<meta name="mobile-web-app-capable" content="yes">
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<link rel="manifest" href="\\/manifest\\.json">
+	<style>html{padding:0}<\\/style>
 	<link href=\\"/bundle.\\w{5}.css\\" rel=\\"preload\\" as=\\"style\\">
-	<style>html{padding:0;}<\\/style>
 <\\/head>
 `;
 
@@ -73,8 +73,8 @@ exports.prerender.heads.custom = `
 	<meta name="mobile-web-app-capable" content="yes">
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<link rel="manifest" href="\\/manifest\\.json">
+	<style>html{padding:0}<\\/style>
 	<link href=\\"/bundle.\\w{5}.css\\" rel=\\"preload\\" as=\\"style\\">
-	<style>html{padding:0;}<\\/style>
 <\\/head>
 `;
 
@@ -92,8 +92,8 @@ exports.preload.head = `
 	<link rel=\\"preload\\" href=\\"\\/route-home\\.chunk\\.\\w{5}\\.js\\" as=\\"script\\">
 	<link rel=\\"preload\\" href=\\"\\/route-home\\~route-route66\\~route-route89\\.chunk\\.\\w{5}\\.js\\" as=\\"script\\">
 	<link rel=\\"preload\\" href=\\"\\/route-home\\.chunk\\.\\w{5}\\.css\\" as=\\"style\\">
+	<style>html{padding:0}<\\/style>
 	<link href=\\"\\/bundle\\.\\w{5}\\.css\\" rel=\\"preload\\" as=\\"style\\">
-	<style>html{padding:0;}<\\/style>
 </head>
 `;
 

packages/cli/tests/images/create.js

@@ -25,6 +25,7 @@ exports.default = [
 	'src/template.html',
 	'tests/__mocks__/browserMocks.js',
 	'tests/__mocks__/fileMocks.js',
+	'tests/__mocks__/setupTests.js',
 	'tests/header.test.js',
 ]
 	.map(s => s.replace(/\//g, path.sep))

yarn.lock

@@ -3793,16 +3793,19 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-critters-webpack-plugin@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/critters-webpack-plugin/-/critters-webpack-plugin-1.3.3.tgz#e52a70042eecc81ea1201f947ef8b65b271bc71f"
-  integrity sha512-F/QVsqA7EI8y53DdBm2dcgRZBM5JYQ7NTZzgwr3a1q3GsaoZCO7HhmYsiU5OvagZgLHZ0ZfsctkThBY7gJ9JxQ==
+critters-webpack-plugin@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/critters-webpack-plugin/-/critters-webpack-plugin-2.4.0.tgz#ebf534a261bee5ca127e1fe321d49011d2431fb7"
+  integrity sha512-CFzD4g693aEzmtCE3IORvqk5FwvSofBscaQkVQvXWuStwhSuNsFMG2xrrxCghy8L1Pt6t2CG3G/tIPaiYD1WQw==
   dependencies:
     css "^2.2.1"
+    cssnano "^4.1.7"
     jsdom "^12.0.0"
     parse5 "^4.0.0"
+    postcss "^7.0.5"
     pretty-bytes "^4.0.2"
-    webpack-sources "^1.1.0"
+    webpack-log "^2.0.0"
+    webpack-sources "^1.3.0"
 
 cross-spawn-promise@^0.10.1:
   version "0.10.1"
@@ -4021,7 +4024,7 @@ cssnano-util-same-parent@^4.0.0:
   resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
   integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
 
-cssnano@^4.1.10:
+cssnano@^4.1.10, cssnano@^4.1.7:
   version "4.1.10"
   resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
   integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==