Fix CSS chunking between multiple framework components

withastro · Mar 17, 2023 · 1f749c9 · 1f749c9
1 parent f5fddaf
commit 1f749c9
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 1 deletion.
diff --git a/.changeset/violet-islands-buy.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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