fix: output css source map (#1794)

* fix: output css source map * Add changeset * test: Correct build tests for css maps * test: Wrong dep versions => wrong file hashes * test: Correct asset-manifest size --------- Co-authored-by: Ryan Christian <rchristian@ryanchristian.dev>
preactjs · Jun 30, 2023 · 047837d · 047837d
1 parent 8d65d94
commit 047837d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/.changeset/old-eels-occur.md b/.changeset/old-eels-occur.md
@@ -0,0 +1,5 @@
+---
+'preact-cli': patch
+---
+
+Output CSS source map on build
diff --git a/packages/cli/src/lib/webpack/webpack-client-config.js b/packages/cli/src/lib/webpack/webpack-client-config.js
@@ -249,6 +249,7 @@ function isProd(env) {
 					cssProcessorOptions: {
 						// Fix keyframes in different CSS chunks minifying to colliding names:
 						reduceIdents: false,
+						map: { inline: false, annotation: true },
 					},
 				}),
 			],

diff --git a/packages/cli/tests/images/build.js b/packages/cli/tests/images/build.js
@@ -19,15 +19,17 @@ exports.default = Object.assign({}, common, {
 	'ssr-build/ssr-bundle.js.map': 52686,
 	'ssr-build/asset-manifest.json': 178,
 	'bundle.4c6ac.css': 1276,
+	'bundle.4c6ac.css.map': 2234,
 	'bundle.c4895.js': 22529,
 	'bundle.c4895.js.map': 111801,
 	'favicon.ico': 15086,
 	'index.html': 4127,
 	'manifest.json': 455,
 	'preact_prerender_data.json': 11,
 	'push-manifest.json': 388,
-	'asset-manifest.json': 1142,
-	'route-home.chunk.9bcab.css': 834,
+	'asset-manifest.json': 1262,
+	'route-home.chunk.9bcab.css': 876,
+	'route-home.chunk.9bcab.css.map': 1349,
 	'route-home.chunk.5d28d.js': 1149,
 	'route-home.chunk.5d28d.js.map': 1961,
 	'route-profile.chunk.4c330.js': 3490,
@@ -44,7 +46,7 @@ exports['default-esm'] = Object.assign({}, exports.default, {
 	'route-profile.chunk.*.esm.js.map': 14942,
 	'index.html': 4221,
 	'push-manifest.json': 404,
-	'asset-manifest.json': 1174,
+	'asset-manifest.json': 1294,
 });
 
 exports.sass = `
@@ -312,8 +314,10 @@ exports.publicPath = `
 		<meta name="apple-mobile-web-app-capable" content="yes">
 		<link rel="apple-touch-icon" href="/example-path/assets/icons/apple-touch-icon.png">
 		<link rel="manifest" href="/example-path/manifest.json">
-		<link href="/example-path/bundle.\\w{5}.css" rel="stylesheet">
-		<style></style>
+		<link href=\\"/example-path/bundle.\\w{5}.css\\" rel=\\"stylesheet\\" media=\\"only x\\" onload=\\"this.media='all'\\">
+		<noscript>
+			<link rel=\\"stylesheet\\" href=\\"\\/example-path/bundle.\\w{5}.css\\">
+		</noscript>
 	</head>
 	<body>
 		<h1>Public path test</h1>