fix: output css source map (#1794)

teodragovic · rschristian · web-flow · commit 047837d9120e · 2023-06-30T18:26:01.000-05:00
* fix: output css source map

* Add changeset

* test: Correct build tests for css maps

* test: Wrong dep versions =&gt; wrong file hashes

* test: Correct asset-manifest size

---------

Co-authored-by: Ryan Christian &lt;rchristian@ryanchristian.dev&gt;
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>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'preact-cli': patch
 +---
++
 +Output CSS source map on build