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

* Add `vite.build.cssTarget` support for CSS build * chore: update lockfile Co-authored-by: Nate Moore <nate@astro.build>
withastro · Aug 4, 2022 · 81c9ad9 · 81c9ad9
1 parent 3362ec2
commit 81c9ad9
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 0 deletions.
diff --git a/.changeset/empty-eagles-reply.md b/.changeset/empty-eagles-reply.md
@@ -0,0 +1,5 @@
+---
+'astro': minor
+---
+
+Add `vite.build.cssTaregt` support for CSS build
diff --git a/packages/astro/src/core/build/static-build.ts b/packages/astro/src/core/build/static-build.ts
@@ -153,6 +153,7 @@ async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, inp
 			rollupPluginAstroBuildCSS({
 				internals,
 				target: 'server',
+				astroConfig,
 			}),
 			...(viteConfig.plugins || []),
 			// SSR needs to be last
@@ -234,6 +235,7 @@ async function clientBuild(
 			rollupPluginAstroBuildCSS({
 				internals,
 				target: 'client',
+				astroConfig,
 			}),
 			...(viteConfig.plugins || []),
 		],

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

diff --git a/packages/astro/test/config-vite-css-target.test.js b/packages/astro/test/config-vite-css-target.test.js
@@ -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}')
+			);
+		});
+	});
+});
diff --git a/packages/astro/test/fixtures/config-vite-css-target/astro.config.mjs b/packages/astro/test/fixtures/config-vite-css-target/astro.config.mjs
@@ -0,0 +1,9 @@
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+	vite: {
+		build: {
+			cssTarget: "safari14",
+		}
+	}
+})
diff --git a/packages/astro/test/fixtures/config-vite-css-target/package.json b/packages/astro/test/fixtures/config-vite-css-target/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@test/config-vite-css-target",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/config-vite-css-target/src/pages/index.astro b/packages/astro/test/fixtures/config-vite-css-target/src/pages/index.astro
@@ -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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml