michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Support vite.build.cssCodeSplit: false option (#4458)

Browse source
This commit is contained in:
Bjorn Lu 2022-08-25 16:34:13 +08:00 committed by GitHub
parent 1d9d72ea31
commit aa555932be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 98 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/sour-avocados-exercise.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Support `vite.build.cssCodeSplit: false` option

28
packages/astro/src/core/build/vite-plugin-css.ts
View file

@ -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',

20
packages/astro/test/css-no-code-split.test.js Normal file
View file

@ -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/);
});
});

11
packages/astro/test/fixtures/css-no-code-split/astro.config.mjs vendored Normal file
View file

@ -0,0 +1,11 @@
import { defineConfig } from 'astro/config';
// https://astro.build/config
export default defineConfig({
vite: {
build: {
cssCodeSplit: false,
},
},
});

8
packages/astro/test/fixtures/css-no-code-split/package.json vendored Normal file
View file

@ -0,0 +1,8 @@
{
"name": "@test/css-no-code-split",
"version": "0.0.0",
"private": true,
"dependencies": {
"astro": "workspace:*"
}
}

13
packages/astro/test/fixtures/css-no-code-split/src/pages/index.astro vendored Normal file
View file

@ -0,0 +1,13 @@
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h1>css no code split</h1>
<style>
h1 {
color: red;
}
</style>
</body>
</html>

21
pnpm-lock.yaml
View file

@ -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