[pull] main from withastro:main

.changeset/kind-squids-warn.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Reintroduces css deduplication for hydrated client components. Ensures assets already added to a client chunk are not flagged as orphaned

.github/workflows/continuous_benchmark.yml

@@ -5,12 +5,14 @@ on:
   pull_request: 
     branches:
       - main
+      - next
     paths:
       - 'packages/astro/src/**/*.ts'
       - 'benchmark/**'
   push:
     branches:
       - main
+      - next
     paths:
       - 'packages/astro/src/**/*.ts'
       - 'benchmark/**'

examples/basics/package.json

@@ -10,6 +10,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^5.16.10"
+    "astro": "^5.16.11"
   }
 }

examples/blog/package.json

@@ -13,7 +13,7 @@
     "@astrojs/mdx": "^4.3.13",
     "@astrojs/rss": "^4.0.15",
     "@astrojs/sitemap": "^3.7.0",
-    "astro": "^5.16.10",
+    "astro": "^5.16.11",
     "sharp": "^0.34.3"
   }
 }

examples/component/package.json

@@ -15,7 +15,7 @@
   ],
   "scripts": {},
   "devDependencies": {
-    "astro": "^5.16.10"
+    "astro": "^5.16.11"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

examples/container-with-vitest/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@astrojs/react": "^4.4.2",
-    "astro": "^5.16.10",
+    "astro": "^5.16.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "vitest": "^3.2.4"

examples/framework-alpine/package.json

@@ -13,6 +13,6 @@
     "@astrojs/alpinejs": "^0.4.9",
     "@types/alpinejs": "^3.13.11",
     "alpinejs": "^3.15.3",
-    "astro": "^5.16.10"
+    "astro": "^5.16.11"
   }
 }

examples/framework-multiple/package.json

@@ -17,7 +17,7 @@
     "@astrojs/vue": "^5.1.4",
     "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
-    "astro": "^5.16.10",
+    "astro": "^5.16.11",
     "preact": "^10.28.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

examples/framework-preact/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@astrojs/preact": "^4.1.3",
     "@preact/signals": "^2.5.1",
-    "astro": "^5.16.10",
+    "astro": "^5.16.11",
     "preact": "^10.28.1"
   }
 }

examples/framework-react/package.json

@@ -13,7 +13,7 @@
     "@astrojs/react": "^4.4.2",
     "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
-    "astro": "^5.16.10",
+    "astro": "^5.16.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }

examples/framework-solid/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@astrojs/solid-js": "^5.1.3",
-    "astro": "^5.16.10",
+    "astro": "^5.16.11",
     "solid-js": "^1.9.10"
   }
 }

examples/framework-svelte/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@astrojs/svelte": "^7.2.5",
-    "astro": "^5.16.10",
+    "astro": "^5.16.11",
     "svelte": "^5.46.1"
   }
 }

examples/framework-vue/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@astrojs/vue": "^5.1.4",
-    "astro": "^5.16.10",
+    "astro": "^5.16.11",
     "vue": "^3.5.26"
   }
 }

examples/hackernews/package.json

@@ -11,6 +11,6 @@
   },
   "dependencies": {
     "@astrojs/node": "^9.5.2",
-    "astro": "^5.16.10"
+    "astro": "^5.16.11"
   }
 }

examples/integration/package.json

@@ -15,7 +15,7 @@
   ],
   "scripts": {},
   "devDependencies": {
-    "astro": "^5.16.10"
+    "astro": "^5.16.11"
   },
   "peerDependencies": {
     "astro": "^4.0.0"

examples/minimal/package.json

@@ -10,6 +10,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^5.16.10"
+    "astro": "^5.16.11"
   }
 }

examples/portfolio/package.json

@@ -10,6 +10,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^5.16.10"
+    "astro": "^5.16.11"
   }
 }

examples/ssr/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@astrojs/node": "^9.5.2",
     "@astrojs/svelte": "^7.2.5",
-    "astro": "^5.16.10",
+    "astro": "^5.16.11",
     "svelte": "^5.46.1"
   }
 }

examples/starlog/package.json

@@ -9,7 +9,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^5.16.10",
+    "astro": "^5.16.11",
     "sass": "^1.97.1",
     "sharp": "^0.34.3"
   }

examples/toolbar-app/package.json

@@ -16,6 +16,6 @@
   },
   "devDependencies": {
     "@types/node": "^18.17.8",
-    "astro": "^5.16.10"
+    "astro": "^5.16.11"
   }
 }

examples/with-markdoc/package.json

@@ -11,6 +11,6 @@
   },
   "dependencies": {
     "@astrojs/markdoc": "^0.15.10",
-    "astro": "^5.16.10"
+    "astro": "^5.16.11"
   }
 }

examples/with-mdx/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@astrojs/mdx": "^4.3.13",
     "@astrojs/preact": "^4.1.3",
-    "astro": "^5.16.10",
+    "astro": "^5.16.11",
     "preact": "^10.28.1"
   }
 }

examples/with-nanostores/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@astrojs/preact": "^4.1.3",
     "@nanostores/preact": "^0.5.2",
-    "astro": "^5.16.10",
+    "astro": "^5.16.11",
     "nanostores": "^0.11.4",
     "preact": "^10.28.1"
   }

examples/with-tailwindcss/package.json

@@ -13,7 +13,7 @@
     "@astrojs/mdx": "^4.3.13",
     "@tailwindcss/vite": "^4.1.18",
     "@types/canvas-confetti": "^1.9.0",
-    "astro": "^5.16.10",
+    "astro": "^5.16.11",
     "canvas-confetti": "^1.9.4",
     "tailwindcss": "^4.1.18"
   }

examples/with-vitest/package.json

@@ -11,7 +11,7 @@
     "test": "vitest"
   },
   "dependencies": {
-    "astro": "^5.16.10",
+    "astro": "^5.16.11",
     "vitest": "^3.2.4"
   }
 }

packages/astro/CHANGELOG.md

@@ -1,5 +1,13 @@
 # astro
 
+## 5.16.11
+
+### Patch Changes
+
+- [#15017](https://github.com/withastro/astro/pull/15017) [`9e7a3c8`](https://github.com/withastro/astro/commit/9e7a3c86198956e558384235b71a6c12e87fc5fb) Thanks [@ixchio](https://github.com/ixchio)! - Fixes CSS double-bundling when the same CSS file is imported in both a page's frontmatter and a component's script tag
+
+- [#15225](https://github.com/withastro/astro/pull/15225) [`6fe62e1`](https://github.com/withastro/astro/commit/6fe62e169cf9e1054cba95ce4084d8a58bdd0a66) Thanks [@ematipico](https://github.com/ematipico)! - Updates to the latest version of `devalue`
+
 ## 5.16.10
 
 ### Patch Changes

packages/astro/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro",
-  "version": "5.16.10",
+  "version": "5.16.11",
   "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
   "type": "module",
   "author": "withastro",
@@ -127,7 +127,7 @@
     "cssesc": "^3.0.0",
     "debug": "^4.4.3",
     "deterministic-object-hash": "^2.0.2",
-    "devalue": "^5.6.1",
+    "devalue": "^5.6.2",
     "diff": "^8.0.3",
     "dlv": "^1.1.3",
     "dset": "^3.1.4",

packages/astro/src/core/build/plugins/plugin-css.ts

@@ -80,7 +80,10 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 						// and that's okay. We can use Rollup's default chunk strategy instead as these CSS
 						// are outside of the SSR build scope, which no dedupe is needed.
 						if (options.target === 'client') {
-							return internals.cssModuleToChunkIdMap.get(id)!;
+							// Find the chunkId for this CSS module in the server build.
+							// If it exists, we can use it to ensure the client build matches the server
+							// build and doesn't create a duplicate chunk.
+							return internals.cssModuleToChunkIdMap.get(id);
 						}
 
 						const ctx = { getModuleInfo: meta.getModuleInfo };
@@ -93,6 +96,7 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 								return chunkId;
 							}
 						}
+
 						const chunkId = createNameForParentPages(id, meta);
 						internals.cssModuleToChunkIdMap.set(id, chunkId);
 						return chunkId;
@@ -185,6 +189,7 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 		},
 		async generateBundle(_outputOptions, bundle) {
 			const inlineConfig = settings.config.build.inlineStylesheets;
+
 			Object.entries(bundle).forEach(([id, stylesheet]) => {
 				if (
 					stylesheet.type !== 'asset' ||
@@ -211,7 +216,23 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 				internals.pagesByKeys.forEach((pageData) => {
 					const orderingInfo = pagesToCss[pageData.moduleSpecifier]?.[stylesheet.fileName];
 					if (orderingInfo !== undefined) {
-						pageData.styles.push({ ...orderingInfo, sheet });
+						// Check if this stylesheet was already added to this page.
+						// We check both inline (by content) and external (by src) styles to prevent
+						// duplicates that can occur when CSS is imported from both a page's frontmatter
+						// and a component's script tag, or when the same plugin runs in both SSR and client builds.
+						const alreadyAdded = pageData.styles.some((s) => {
+							if (s.sheet.type === 'external' && sheet.type === 'external') {
+								return s.sheet.src === sheet.src;
+							}
+							if (s.sheet.type === 'inline' && sheet.type === 'inline') {
+								return s.sheet.content === sheet.content;
+							}
+							return false;
+						});
+
+						if (!alreadyAdded) {
+							pageData.styles.push({ ...orderingInfo, sheet });
+						}
 						sheetAddedToPage = true;
 					}
 				});
@@ -230,8 +251,18 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 					sheetAddedToPage = true;
 				}
 
-				if (toBeInlined && sheetAddedToPage) {
-					// CSS is already added to all used pages, we can delete it from the bundle
+				const wasInlined = toBeInlined && sheetAddedToPage;
+				// stylesheets already referenced as an asset by a chunk will not be inlined by
+				// this plugin, but should not be considered orphaned
+				const wasAddedToChunk = Object.values(bundle).some(
+					(chunk) => chunk.type === 'chunk' && chunk.viteMetadata?.importedAssets?.has(id),
+				);
+				const isOrphaned = !sheetAddedToPage && !wasAddedToChunk;
+
+				if (wasInlined || isOrphaned) {
+					// wasInlined : CSS is already added to all used pages
+					// isOrphaned : CSS is already used in a merged chunk
+					// we can delete it from the bundle
 					// and make sure no chunks reference it via `importedCss` (for Vite preloading)
 					// to avoid duplicate CSS.
 					delete bundle[id];