fix: css styles in prod

apps/portfolio/astro.config.mjs

@@ -3,7 +3,6 @@ import partytown from "@astrojs/partytown";
 import sitemap from "@astrojs/sitemap";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig, sharpImageService } from "astro/config";
-import critters from "astro-critters";
 import icon from "astro-icon";
 import pagefind from "astro-pagefind";
 import {
@@ -130,23 +129,18 @@ export default defineConfig({
 			},
 		}),
 		(await import("astro-compress")).default({
-			// Re-enable CSS compression now that the scoping issue is fixed
-			CSS: {
-				// Use csso for better CSS minification
-				csso: {
-					restructure: true,
-					forceMediaMerge: false,
-					comments: false,
-				},
-			},
+			// NOTE: keep CSS post-processing off here.
+			// In production builds we observed broken scoped styles with additional
+			// CSS optimization/inlining passes. Keep this conservative for stability.
+			CSS: false,
 			HTML: {
 				"html-minifier-terser": {
 					removeAttributeQuotes: false,
 					// Preserve data attributes used for Astro scoping
 					removeEmptyAttributes: false,
 					// Don't collapse whitespace aggressively to preserve readability
 					conservativeCollapse: true,
-					minifyCSS: true,
+					minifyCSS: false,
 					minifyJS: true,
 					removeComments: true,
 					collapseWhitespace: true,
@@ -187,18 +181,6 @@ export default defineConfig({
 			}),
 		),
 		mdx(),
-		// Critical CSS inlining for better PageSpeed scores
-		// This inlines above-the-fold CSS and lazy-loads the rest
-		critters({
-			// Only inline critical CSS to reduce render-blocking
-			pruneSource: false,
-			// Use media attribute for non-critical CSS (print trick)
-			preload: "media",
-			// Inline fonts for faster initial render
-			inlineFonts: false,
-			// Remove unused CSS selectors
-			reduceInlineStyles: true,
-		}),
 	],
 
 	vite: {

packages/shared/src/styles/global.css

@@ -1,4 +1,6 @@
 @import "tailwindcss";
+@source "../../../../apps/portfolio/src";
+@source "../../../../apps/blog/src";
 @import "./fonts.css";
 @plugin "@tailwindcss/typography";
 @custom-variant dark (&:where(.dark, .dark *));