From a99c8381b1401cbc4cbaa5d293f44a1e9c13dba3 Mon Sep 17 00:00:00 2001 From: Christopher Koch Date: Tue, 4 Aug 2026 10:45:46 -0400 Subject: [PATCH] Disable critical-CSS inlining so the stylesheet survives the CSP MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Angular's production build defers the main stylesheet with `media="print" onload="this.media='all'"` and inlines a critical subset ahead of it. The nginx CSP sets `script-src 'self'`, which blocks that inline event handler — so the swap never ran and the stylesheet stayed print-only. The app rendered from the ~23kB critical subset alone. Most of the page still looked right, which is what made it easy to miss. Material icons did not: `.material-icons` was not in the critical subset, so every icon fell back to the body font and rendered its ligature name ("videogame_asset") clipped to the icon box. `inlineCritical: false` emits a plain . The stylesheet is 24kB and same-origin, so the optimisation bought little and cost correctness under a strict CSP. Verified in headless Chromium: icons render as glyphs across the toolbar, grid, editor and mobile layouts, and the console is now clean where it previously logged four CSP violations per page load. Co-Authored-By: Claude Opus 5 (1M context) --- frontend/angular.json | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/frontend/angular.json b/frontend/angular.json index 44aa777..e199257 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -51,7 +51,15 @@ "maximumError": "8kB" } ], - "outputHashing": "all" + "outputHashing": "all", + "optimization": { + "scripts": true, + "styles": { + "minify": true, + "inlineCritical": false + }, + "fonts": true + } }, "development": { "optimization": false,