From 307b7b97ce79d076ceb4fdc25fd28a27077deb34 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Tue, 6 Sep 2022 15:03:02 -0400 Subject: [PATCH] When removing duplicate CSS, also remove from metadata (#4643) * When removing duplicate CSS, also remove from metadata * Adding a changeset --- .changeset/seven-zoos-lie.md | 5 +++++ packages/astro/src/core/build/vite-plugin-css.ts | 1 + packages/astro/test/0-css.test.js | 11 +++++++++++ .../fixtures/0-css/src/components/ReactDynamic.jsx | 12 ++++++++++-- .../test/fixtures/0-css/src/components/ReactLazy.jsx | 6 ++++++ .../0-css/src/components/ReactLazy.module.css | 3 +++ packages/astro/test/test-utils.js | 5 +++++ 7 files changed, 41 insertions(+), 2 deletions(-) create mode 100644 .changeset/seven-zoos-lie.md create mode 100644 packages/astro/test/fixtures/0-css/src/components/ReactLazy.jsx create mode 100644 packages/astro/test/fixtures/0-css/src/components/ReactLazy.module.css diff --git a/.changeset/seven-zoos-lie.md b/.changeset/seven-zoos-lie.md new file mode 100644 index 0000000000..b19de1b05d --- /dev/null +++ b/.changeset/seven-zoos-lie.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Remove regression when there is duplicate client/server CSS diff --git a/packages/astro/src/core/build/vite-plugin-css.ts b/packages/astro/src/core/build/vite-plugin-css.ts index 76f19c8f35..28e88cf65d 100644 --- a/packages/astro/src/core/build/vite-plugin-css.ts +++ b/packages/astro/src/core/build/vite-plugin-css.ts @@ -148,6 +148,7 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] if (Object.keys(c.modules).every((id) => internals.cssChunkModuleIds.has(id))) { for (const importedCssImport of meta.importedCss) { delete bundle[importedCssImport]; + meta.importedCss.delete(importedCssImport); } return; } diff --git a/packages/astro/test/0-css.test.js b/packages/astro/test/0-css.test.js index 5a32b3ad6f..1b1391f97d 100644 --- a/packages/astro/test/0-css.test.js +++ b/packages/astro/test/0-css.test.js @@ -8,6 +8,7 @@ import { expect } from 'chai'; import * as cheerio from 'cheerio'; import { loadFixture } from './test-utils.js'; +/** @type {import('./test-utils').Fixture} */ let fixture; describe('CSS', function () { @@ -360,6 +361,16 @@ describe('CSS', function () { // SvelteDynamic styles is already included in the main page css asset const unusedCssAsset = bundledAssets.find((asset) => /SvelteDynamic\..*\.css/.test(asset)); expect(unusedCssAsset, 'Found unused style ' + unusedCssAsset).to.be.undefined; + + let foundVitePreloadCSS = false; + const bundledJS = await fixture.glob('**/*.?(m)js'); + for(const filename of bundledJS) { + const content = await fixture.readFile(filename); + if(content.match(/ReactDynamic\..*\.css/)) { + foundVitePreloadCSS = filename; + } + } + expect(foundVitePreloadCSS).to.equal(false, 'Should not have found a preload for the dynamic CSS'); }); }); }); diff --git a/packages/astro/test/fixtures/0-css/src/components/ReactDynamic.jsx b/packages/astro/test/fixtures/0-css/src/components/ReactDynamic.jsx index 14527edb41..bdc7177ec2 100644 --- a/packages/astro/test/fixtures/0-css/src/components/ReactDynamic.jsx +++ b/packages/astro/test/fixtures/0-css/src/components/ReactDynamic.jsx @@ -1,5 +1,13 @@ import React from 'react'; +const ReactLazy = React.lazy(() => import('./ReactLazy')); + export default function() { - return
; -} \ No newline at end of file + return ( +
+ + + +
+ ); +} diff --git a/packages/astro/test/fixtures/0-css/src/components/ReactLazy.jsx b/packages/astro/test/fixtures/0-css/src/components/ReactLazy.jsx new file mode 100644 index 0000000000..9c731ed68c --- /dev/null +++ b/packages/astro/test/fixtures/0-css/src/components/ReactLazy.jsx @@ -0,0 +1,6 @@ +import React from 'react'; +import mod from './ReactLazy.module.css'; + +export default function() { + return
; +} diff --git a/packages/astro/test/fixtures/0-css/src/components/ReactLazy.module.css b/packages/astro/test/fixtures/0-css/src/components/ReactLazy.module.css new file mode 100644 index 0000000000..1f188e31db --- /dev/null +++ b/packages/astro/test/fixtures/0-css/src/components/ReactLazy.module.css @@ -0,0 +1,3 @@ +.lazy { + background: yellow; +} diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js index ded7e77450..72945d8a36 100644 --- a/packages/astro/test/test-utils.js +++ b/packages/astro/test/test-utils.js @@ -9,6 +9,7 @@ import preview from '../dist/core/preview/index.js'; import { nodeLogDestination } from '../dist/core/logger/node.js'; import os from 'os'; import stripAnsi from 'strip-ansi'; +import fastGlob from 'fast-glob'; // polyfill WebAPIs to globalThis for Node v12, Node v14, and Node v16 polyfill(globalThis, { @@ -30,6 +31,7 @@ polyfill(globalThis, { * @property {(path: string) => Promise} readFile * @property {(path: string, updater: (content: string) => string) => Promise} writeFile * @property {(path: string) => Promise} readdir + * @property {(pattern: string) => Promise} glob * @property {() => Promise} startDevServer * @property {() => Promise} preview * @property {() => Promise} clean @@ -147,6 +149,9 @@ export async function loadFixture(inlineConfig) { readFile: (filePath) => fs.promises.readFile(new URL(filePath.replace(/^\//, ''), config.outDir), 'utf8'), readdir: (fp) => fs.promises.readdir(new URL(fp.replace(/^\//, ''), config.outDir)), + glob: (p) => fastGlob(p, { + cwd: fileURLToPath(config.outDir) + }), clean: async () => { await fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true }); },