diff options
8 files changed, 91 insertions, 0 deletions
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 |