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

Add vite.build.cssTarget support for CSS build (#4155)

Browse source 
* Add `vite.build.cssTarget` support for CSS build

* chore: update lockfile

Co-authored-by: Nate Moore <nate@astro.build>
This commit is contained in:
kagankan 2022-08-05 04:39:43 +09:00 committed by GitHub
parent 3362ec2478
commit 81c9ad9a6b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 91 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/empty-eagles-reply.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': minor
---
Add `vite.build.cssTaregt` support for CSS build

2
packages/astro/src/core/build/static-build.ts
View file

@ -153,6 +153,7 @@ async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, inp
rollupPluginAstroBuildCSS({ rollupPluginAstroBuildCSS({
internals, internals,
target: 'server', target: 'server',
astroConfig,
}), }),
...(viteConfig.plugins || []), ...(viteConfig.plugins || []),
// SSR needs to be last // SSR needs to be last
@ -234,6 +235,7 @@ async function clientBuild(
rollupPluginAstroBuildCSS({ rollupPluginAstroBuildCSS({
internals, internals,
target: 'client', target: 'client',
astroConfig,
}), }),
...(viteConfig.plugins || []), ...(viteConfig.plugins || []),
], ],

4
packages/astro/src/vite-plugin-build-css/index.ts
View file

@ -8,10 +8,12 @@ import { Plugin as VitePlugin } from 'vite';
import { getTopLevelPages, walkParentInfos } from '../core/build/graph.js'; import { getTopLevelPages, walkParentInfos } from '../core/build/graph.js';
import { getPageDataByViteID, getPageDatasByClientOnlyID } from '../core/build/internal.js'; import { getPageDataByViteID, getPageDatasByClientOnlyID } from '../core/build/internal.js';
import { isCSSRequest } from '../core/render/util.js'; import { isCSSRequest } from '../core/render/util.js';
import { AstroConfig } from '../@types/astro';
interface PluginOptions { interface PluginOptions {
internals: BuildInternals; internals: BuildInternals;
target: 'client' | 'server'; target: 'client' | 'server';
astroConfig: AstroConfig;
} }
export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] { export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
@ -118,9 +120,11 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[]
for (const [, output] of Object.entries(bundle)) { for (const [, output] of Object.entries(bundle)) {
if (output.type === 'asset') { if (output.type === 'asset') {
if (output.name?.endsWith('.css') && typeof output.source === 'string') { if (output.name?.endsWith('.css') && typeof output.source === 'string') {
const cssTarget = options.astroConfig.vite.build?.cssTarget;
const { code: minifiedCSS } = await esbuild.transform(output.source, { const { code: minifiedCSS } = await esbuild.transform(output.source, {
loader: 'css', loader: 'css',
minify: true, minify: true,
...(cssTarget ? { target: cssTarget } : {}),
}); });
output.source = minifiedCSS; output.source = minifiedCSS;
} }

39
packages/astro/test/config-vite-css-target.test.js Normal file
View file

@ -0,0 +1,39 @@
/**
* css-target
*/
import { expect } from 'chai';
import * as cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
let fixture;
describe('CSS', function () {
before(async () => {
fixture = await loadFixture({ root: './fixtures/config-vite-css-target/' });
});
describe('build', () => {
let $;
let html;
let bundledCSS;
before(async () => {
await fixture.build();
// get bundled CSS (will be hashed, hence DOM query)
html = await fixture.readFile('/index.html');
$ = cheerio.load(html);
const bundledCSSHREF = $('link[rel=stylesheet][href^=/assets/]').attr('href');
bundledCSS = (await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/')))
.replace(/\s/g, '')
.replace('/n', '');
});
it('vite.build.cssTarget is respected', async () => {
expect(bundledCSS).to.match(
new RegExp('.class\\:where\\(.astro-[^{]*{top:0;right:0;bottom:0;left:0}')
);
});
});
});

9
packages/astro/test/fixtures/config-vite-css-target/astro.config.mjs vendored Normal file
View file

@ -0,0 +1,9 @@
import { defineConfig } from 'astro/config';
export default defineConfig({
vite: {
build: {
cssTarget: "safari14",
}
}
})

8
packages/astro/test/fixtures/config-vite-css-target/package.json vendored Normal file
View file

@ -0,0 +1,8 @@
{
"name": "@test/config-vite-css-target",
"version": "0.0.0",
"private": true,
"dependencies": {
"astro": "workspace:*"
}
}

18
packages/astro/test/fixtures/config-vite-css-target/src/pages/index.astro vendored Normal file
View file

@ -0,0 +1,18 @@
<html>
<head>
<title>css-target</title>
</head>
<body>
<h1>css-target</h1>
<div class="class"></div>
</body>
</html>
<style>
.class {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>

6
pnpm-lock.yaml
View file

@ -1389,6 +1389,12 @@ importers:
dependencies: dependencies:
astro: link:../../.. astro: link:../../..
packages/astro/test/fixtures/config-vite-css-target:
specifiers:
astro: workspace:*
dependencies:
astro: link:../../..
packages/astro/test/fixtures/css-assets: packages/astro/test/fixtures/css-assets:
specifiers: specifiers:
'@astrojs/test-font-awesome-package': file:packages/font-awesome '@astrojs/test-font-awesome-package': file:packages/font-awesome