fix(frontend) :: drop source map comments from joined sylesheet

CHANGELOG.md

@@ -8,6 +8,8 @@
 
 - The table component accepts a top-level `title`, shown in a header above the table like in the list and datagrid components. ([#1261](https://github.com/sqlpage/SQLPage/issues/1261))
 
+- Browser developer tools no longer report missing `.css.map` files. ([#1163](https://github.com/sqlpage/SQLPage/issues/1163))
+
 - Restored parameter reuse for repeated variables on SQL Server, PostgreSQL, and SQLite, fixing SQL Server and PostgreSQL queries that repeat a variable-dependent expression in `SELECT` and `GROUP BY`.
 
 - The modal component accepts `close_label` as another name for `close`, which is a reserved word on SQL Server. ([#1070](https://github.com/sqlpage/SQLPage/issues/1070))

scripts/build-frontend.mjs

@@ -41,9 +41,12 @@ async function script(entry) {
   await serve(`${entry}.js`, output[0].code);
 }
 
+const SOURCE_MAP_COMMENT = /\/\*# sourceMappingURL=\S+ \*\//g;
+
 async function stylesheet() {
   const parts = await Promise.all(STYLESHEET.map((p) => readFile(p, "utf8")));
-  await serve("sqlpage.css", parts.join("\n"));
+  const joined = parts.join("\n").replaceAll(SOURCE_MAP_COMMENT, "");
+  await serve("sqlpage.css", joined);
 }
 
 await mkdir(DIST, { recursive: true });

tests/end-to-end/fixtures/assets/index.sql

@@ -0,0 +1 @@
+SELECT 'text' AS component, 'A page with every default asset' AS contents;

tests/end-to-end/fixtures/assets/test.ts

@@ -0,0 +1,21 @@
+import { expect, test } from "../../fixture.ts";
+
+test("assets do not name source maps that SQLPage does not serve", async ({
+  page,
+}) => {
+  const assets = await page
+    .locator("script[src], link[rel=stylesheet]")
+    .evaluateAll((elements) =>
+      elements
+        .map(
+          (element) =>
+            element.getAttribute("src") ?? element.getAttribute("href"),
+        )
+        .filter((url): url is string => url?.startsWith("/") ?? false),
+    );
+  expect(assets).not.toEqual([]);
+  for (const asset of assets) {
+    const body = await (await page.request.get(asset)).text();
+    expect(body, asset).not.toContain("sourceMappingURL=");
+  }
+});