From 81c9ad9a6bdb2806f3ccb77113a0cb40459b3d70 Mon Sep 17 00:00:00 2001
From: kagankan <34136752+kagankan@users.noreply.github.com>
Date: Fri, 5 Aug 2022 04:39:43 +0900
Subject: [PATCH] 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>
---
 .changeset/empty-eagles-reply.md              |  5 +++
 packages/astro/src/core/build/static-build.ts |  2 +
 .../astro/src/vite-plugin-build-css/index.ts  |  4 ++
 .../astro/test/config-vite-css-target.test.js | 39 +++++++++++++++++++
 .../config-vite-css-target/astro.config.mjs   |  9 +++++
 .../config-vite-css-target/package.json       |  8 ++++
 .../src/pages/index.astro                     | 18 +++++++++
 pnpm-lock.yaml                                |  6 +++
 8 files changed, 91 insertions(+)
 create mode 100644 .changeset/empty-eagles-reply.md
 create mode 100644 packages/astro/test/config-vite-css-target.test.js
 create mode 100644 packages/astro/test/fixtures/config-vite-css-target/astro.config.mjs
 create mode 100644 packages/astro/test/fixtures/config-vite-css-target/package.json
 create mode 100644 packages/astro/test/fixtures/config-vite-css-target/src/pages/index.astro

diff --git a/.changeset/empty-eagles-reply.md b/.changeset/empty-eagles-reply.md
new file mode 100644
index 000000000..1a22771fb
--- /dev/null
+++ 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
index 19778ae4b..a94174ad7 100644
--- 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
index 1407688b1..5becf7785 100644
--- 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
new file mode 100644
index 000000000..b3bce1d07
--- /dev/null
+++ 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
new file mode 100644
index 000000000..6a58b2913
--- /dev/null
+++ 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
new file mode 100644
index 000000000..c9b236858
--- /dev/null
+++ 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
new file mode 100644
index 000000000..5d3a182a6
--- /dev/null
+++ 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
index 20db5c7de..b7d260542 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1389,6 +1389,12 @@ importers:
     dependencies:
       astro: link:../../..
 
+  packages/astro/test/fixtures/config-vite-css-target:
+    specifiers:
+      astro: workspace:*
+    dependencies:
+      astro: link:../../..
+
   packages/astro/test/fixtures/css-assets:
     specifiers:
       '@astrojs/test-font-awesome-package': file:packages/font-awesome