From aa555932be9c4805c3dc3008a7edf244090155ea Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Thu, 25 Aug 2022 16:34:13 +0800 Subject: [PATCH] Support `vite.build.cssCodeSplit: false` option (#4458) --- .changeset/sour-avocados-exercise.md | 5 ++++ .../astro/src/core/build/vite-plugin-css.ts | 28 +++++++++++++++++-- packages/astro/test/css-no-code-split.test.js | 20 +++++++++++++ .../css-no-code-split/astro.config.mjs | 11 ++++++++ .../fixtures/css-no-code-split/package.json | 8 ++++++ .../css-no-code-split/src/pages/index.astro | 13 +++++++++ pnpm-lock.yaml | 21 ++++++++++---- 7 files changed, 98 insertions(+), 8 deletions(-) create mode 100644 .changeset/sour-avocados-exercise.md create mode 100644 packages/astro/test/css-no-code-split.test.js create mode 100644 packages/astro/test/fixtures/css-no-code-split/astro.config.mjs create mode 100644 packages/astro/test/fixtures/css-no-code-split/package.json create mode 100644 packages/astro/test/fixtures/css-no-code-split/src/pages/index.astro diff --git a/.changeset/sour-avocados-exercise.md b/.changeset/sour-avocados-exercise.md new file mode 100644 index 0000000000..0e625b23ea --- /dev/null +++ b/.changeset/sour-avocados-exercise.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Support `vite.build.cssCodeSplit: false` option diff --git a/packages/astro/src/core/build/vite-plugin-css.ts b/packages/astro/src/core/build/vite-plugin-css.ts index aa76f6060c..8dabd8ce36 100644 --- a/packages/astro/src/core/build/vite-plugin-css.ts +++ b/packages/astro/src/core/build/vite-plugin-css.ts @@ -6,11 +6,11 @@ import type { PageBuildData, StaticBuildOptions } from './types'; import crypto from 'crypto'; import esbuild from 'esbuild'; import npath from 'path'; -import { Plugin as VitePlugin } from 'vite'; +import { Plugin as VitePlugin, ResolvedConfig } from 'vite'; import { isCSSRequest } from '../render/util.js'; import { relativeToSrcDir } from '../util.js'; import { getTopLevelPages, walkParentInfos } from './graph.js'; -import { getPageDataByViteID, getPageDatasByClientOnlyID } from './internal.js'; +import { getPageDataByViteID, getPageDatasByClientOnlyID, eachPageData } from './internal.js'; interface PluginOptions { internals: BuildInternals; @@ -26,6 +26,8 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] const { internals, buildOptions } = options; const { astroConfig } = buildOptions; + let resolvedConfig: ResolvedConfig; + // Turn a page location into a name to be used for the CSS file. function nameifyPage(id: string) { let rel = relativeToSrcDir(astroConfig, id); @@ -150,6 +152,28 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] } }, }, + { + name: 'astro:rollup-plugin-single-css', + enforce: 'post', + configResolved(config) { + resolvedConfig = config; + }, + generateBundle(_, bundle) { + // If user disable css code-splitting, search for Vite's hardcoded + // `style.css` and add it as css for each page. + // Ref: https://github.com/vitejs/vite/blob/b2c0ee04d4db4a0ef5a084c50f49782c5f88587c/packages/vite/src/node/plugins/html.ts#L690-L705 + if (!resolvedConfig.build.cssCodeSplit) { + const cssChunk = Object.values(bundle).find( + (chunk) => chunk.type === 'asset' && chunk.name === 'style.css' + ); + if (cssChunk) { + for (const pageData of eachPageData(internals)) { + pageData.css.set(cssChunk.fileName, { depth: -1 }); + } + } + } + }, + }, { name: 'astro:rollup-plugin-build-css-minify', enforce: 'post', diff --git a/packages/astro/test/css-no-code-split.test.js b/packages/astro/test/css-no-code-split.test.js new file mode 100644 index 0000000000..c10a9afddf --- /dev/null +++ b/packages/astro/test/css-no-code-split.test.js @@ -0,0 +1,20 @@ +import { expect } from 'chai'; +import * as cheerio from 'cheerio'; +import { loadFixture } from './test-utils.js'; + +describe('vite.build.cssCodeSplit: false', () => { + /** @type {import('./test-utils').Fixture} */ + let fixture; + + before(async () => { + fixture = await loadFixture({ root: './fixtures/css-no-code-split/' }); + await fixture.build(); + }); + + it('loads styles correctly', async () => { + let html = await fixture.readFile('/index.html'); + let $ = cheerio.load(html); + const cssHref = $('link[rel=stylesheet][href^=/assets/]').attr('href'); + expect(cssHref).to.match(/\/assets\/style\..*?\.css/); + }); +}); diff --git a/packages/astro/test/fixtures/css-no-code-split/astro.config.mjs b/packages/astro/test/fixtures/css-no-code-split/astro.config.mjs new file mode 100644 index 0000000000..a0a6061006 --- /dev/null +++ b/packages/astro/test/fixtures/css-no-code-split/astro.config.mjs @@ -0,0 +1,11 @@ +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + vite: { + build: { + cssCodeSplit: false, + }, + }, +}); + diff --git a/packages/astro/test/fixtures/css-no-code-split/package.json b/packages/astro/test/fixtures/css-no-code-split/package.json new file mode 100644 index 0000000000..4101e5d18a --- /dev/null +++ b/packages/astro/test/fixtures/css-no-code-split/package.json @@ -0,0 +1,8 @@ +{ + "name": "@test/css-no-code-split", + "version": "0.0.0", + "private": true, + "dependencies": { + "astro": "workspace:*" + } +} diff --git a/packages/astro/test/fixtures/css-no-code-split/src/pages/index.astro b/packages/astro/test/fixtures/css-no-code-split/src/pages/index.astro new file mode 100644 index 0000000000..1e72f6ba43 --- /dev/null +++ b/packages/astro/test/fixtures/css-no-code-split/src/pages/index.astro @@ -0,0 +1,13 @@ + + + + + +

css no code split

+ + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a3fa9346ef..29e613c5c7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -361,7 +361,7 @@ importers: autoprefixer: 10.4.8_postcss@8.4.16 canvas-confetti: 1.5.1 postcss: 8.4.16 - tailwindcss: 3.1.8 + tailwindcss: 3.1.8_postcss@8.4.16 examples/with-vite-plugin-pwa: specifiers: @@ -370,7 +370,7 @@ importers: workbox-window: ^6.5.3 devDependencies: astro: link:../../packages/astro - vite-plugin-pwa: 0.11.11 + vite-plugin-pwa: 0.11.11_workbox-window@6.5.4 workbox-window: 6.5.4 examples/with-vitest: @@ -1469,6 +1469,12 @@ importers: packages/astro/test/fixtures/css-assets/packages/font-awesome: specifiers: {} + packages/astro/test/fixtures/css-no-code-split: + specifiers: + astro: workspace:* + dependencies: + astro: link:../../.. + packages/astro/test/fixtures/css-order: specifiers: astro: workspace:* @@ -2045,7 +2051,7 @@ importers: astro: link:../../.. autoprefixer: 10.4.8_postcss@8.4.16 postcss: 8.4.16 - tailwindcss: 3.1.8 + tailwindcss: 3.1.8_postcss@8.4.16 packages/astro/test/fixtures/type-imports: specifiers: @@ -2584,7 +2590,7 @@ importers: '@proload/core': 0.3.2 autoprefixer: 10.4.8_postcss@8.4.16 postcss: 8.4.16 - tailwindcss: 3.1.8 + tailwindcss: 3.1.8_postcss@8.4.16 devDependencies: astro: link:../../astro astro-scripts: link:../../../scripts @@ -15959,10 +15965,12 @@ packages: tslib: 2.4.0 dev: true - /tailwindcss/3.1.8: + /tailwindcss/3.1.8_postcss@8.4.16: resolution: {integrity: sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==} engines: {node: '>=12.13.0'} hasBin: true + peerDependencies: + postcss: ^8.0.9 dependencies: arg: 5.0.2 chokidar: 3.5.3 @@ -16712,10 +16720,11 @@ packages: magic-string: 0.26.2 dev: true - /vite-plugin-pwa/0.11.11: + /vite-plugin-pwa/0.11.11_workbox-window@6.5.4: resolution: {integrity: sha512-/nSLS7VfGN5UrL4a1ALGEQAyga/H0hYZjEkwPehiEFW1PM1DTi1A8GkPCsmevKwR6vt10P+5wS1wrvSgwQemzw==} peerDependencies: vite: ^2.0.0 + workbox-window: ^6.4.0 peerDependenciesMeta: vite: optional: true