diff --git a/.changeset/violet-islands-buy.md b/.changeset/violet-islands-buy.md
new file mode 100644
index 000000000000..044407135cf6
--- /dev/null
+++ b/.changeset/violet-islands-buy.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix CSS chunking between multiple framework components
diff --git a/packages/astro/src/core/build/plugins/plugin-css.ts b/packages/astro/src/core/build/plugins/plugin-css.ts
index 9873ad8898be..20e4dd92c2ec 100644
--- a/packages/astro/src/core/build/plugins/plugin-css.ts
+++ b/packages/astro/src/core/build/plugins/plugin-css.ts
@@ -56,6 +56,8 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[]
 			name: 'astro:rollup-plugin-build-css',
 
 			outputOptions(outputOptions) {
+				if (options.target === 'client') return
+				
 				const assetFileNames = outputOptions.assetFileNames;
 				const namingIncludesHash = assetFileNames?.toString().includes('[hash]');
 				const createNameForParentPages = namingIncludesHash
diff --git a/packages/astro/test/css-order-import.test.js b/packages/astro/test/css-order-import.test.js
index 01b6f5497199..d580530f13df 100644
--- a/packages/astro/test/css-order-import.test.js
+++ b/packages/astro/test/css-order-import.test.js
@@ -106,6 +106,17 @@ describe('CSS ordering - import order', () => {
 			expect(idx1).to.be.greaterThan(idx2);
 			expect(idx2).to.be.greaterThan(idx3);
 		});
+
+		it('correctly chunks css import from framework components', async () => {
+			let html = await fixture.readFile('/index.html');
+
+			const content = await Promise.all(getLinks(html).map((href) => getLinkContent(href)));
+			const [, { css }] = content;
+			expect(css).to.not.include(
+				'.client-1{background:red!important}',
+				'CSS from Client2.jsx leaked into index.astro when chunking'
+			);
+		});
 	});
 
 	describe('Dynamic import', () => {
diff --git a/packages/astro/test/fixtures/css-order-import/astro.config.mjs b/packages/astro/test/fixtures/css-order-import/astro.config.mjs
new file mode 100644
index 000000000000..1c9fe511ffce
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order-import/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import react from '@astrojs/react'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [react()]
+});
diff --git a/packages/astro/test/fixtures/css-order-import/package.json b/packages/astro/test/fixtures/css-order-import/package.json
index 2901a838fa3b..caf2346ea5d0 100644
--- a/packages/astro/test/fixtures/css-order-import/package.json
+++ b/packages/astro/test/fixtures/css-order-import/package.json
@@ -1,6 +1,9 @@
 {
   "name": "@test/css-order-import",
   "dependencies": {
-    "astro": "workspace:*"
+    "@astrojs/react": "workspace:*",
+    "astro": "workspace:*",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   }
 }
diff --git a/packages/astro/test/fixtures/css-order-import/src/components/Client1.jsx b/packages/astro/test/fixtures/css-order-import/src/components/Client1.jsx
new file mode 100644
index 000000000000..2cec90a9a67f
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order-import/src/components/Client1.jsx
@@ -0,0 +1,5 @@
+import "../styles/Client1.css"
+
+export default function Client() {
+  return <div className="client-1">Client 1</div>;
+}
diff --git a/packages/astro/test/fixtures/css-order-import/src/components/Client2.jsx b/packages/astro/test/fixtures/css-order-import/src/components/Client2.jsx
new file mode 100644
index 000000000000..226f546792e7
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order-import/src/components/Client2.jsx
@@ -0,0 +1,5 @@
+import "../styles/Client2.css"
+
+export default function Client() {
+  return <div className="client-2">Client 2</div>;
+}
diff --git a/packages/astro/test/fixtures/css-order-import/src/pages/component.astro b/packages/astro/test/fixtures/css-order-import/src/pages/component.astro
index 018ab1866f5d..1b779d18db03 100644
--- a/packages/astro/test/fixtures/css-order-import/src/pages/component.astro
+++ b/packages/astro/test/fixtures/css-order-import/src/pages/component.astro
@@ -1,6 +1,7 @@
 ---
 import One from '../components/One.astro';
 import Two from '../components/Two.astro';
+import Client2 from '../components/Client2.jsx';
 ---
 <html>
 <head>
@@ -15,5 +16,6 @@ import Two from '../components/Two.astro';
 </head>
 <body>
 	<h1>Test</h1>
+	<Client2 client:only="react" />
 </body>
 </html>
diff --git a/packages/astro/test/fixtures/css-order-import/src/pages/index.astro b/packages/astro/test/fixtures/css-order-import/src/pages/index.astro
index 0843250c04f6..0a6baab59486 100644
--- a/packages/astro/test/fixtures/css-order-import/src/pages/index.astro
+++ b/packages/astro/test/fixtures/css-order-import/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import '../styles/base.css';
+import Client1 from '../components/Client1.jsx';
 ---
 <html>
 <head>
@@ -12,5 +13,6 @@ import '../styles/base.css';
 </head>
 <body>
 	<h1>Test</h1>
+	<Client1 client:only="react" />
 </body>
 </html>
diff --git a/packages/astro/test/fixtures/css-order-import/src/styles/Client1.css b/packages/astro/test/fixtures/css-order-import/src/styles/Client1.css
new file mode 100644
index 000000000000..86eb7de5d14b
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order-import/src/styles/Client1.css
@@ -0,0 +1,3 @@
+.client-1 {
+	background: green;
+}
diff --git a/packages/astro/test/fixtures/css-order-import/src/styles/Client2.css b/packages/astro/test/fixtures/css-order-import/src/styles/Client2.css
new file mode 100644
index 000000000000..10acac0f300f
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order-import/src/styles/Client2.css
@@ -0,0 +1,10 @@
+/*
+	This cheeky css tries to affect index.astro, the good thing is that the Client2.jsx component is
+	only loaded in component.astro. So index.astro's Client1.jsx component should not be affected by this.
+*/
+.client-1 {
+	background: red !important;
+}
+.client-2 {
+	background: green;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 380705f8142c..5a0bb01ab791 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1912,9 +1912,15 @@ importers:
 
   packages/astro/test/fixtures/css-order-import:
     specifiers:
+      '@astrojs/react': workspace:*
       astro: workspace:*
+      react: ^18.1.0
+      react-dom: ^18.1.0
     dependencies:
+      '@astrojs/react': link:../../../../integrations/react
       astro: link:../../..
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
 
   packages/astro/test/fixtures/css-order-layout:
     specifiers: