diff options
| -rw-r--r-- | packages/astro/src/vite-plugin-build-css/index.ts | 20 | ||||
| -rw-r--r-- | packages/astro/test/astro-styles-ssr.test.js | 6 | ||||
| -rw-r--r-- | yarn.lock | 8 |
3 files changed, 23 insertions, 11 deletions
diff --git a/packages/astro/src/vite-plugin-build-css/index.ts b/packages/astro/src/vite-plugin-build-css/index.ts index 192ec0194..b9b475e63 100644 --- a/packages/astro/src/vite-plugin-build-css/index.ts +++ b/packages/astro/src/vite-plugin-build-css/index.ts @@ -1,10 +1,10 @@ -import type { ResolveIdHook, LoadHook, RenderedChunk } from 'rollup'; +import type {RenderedChunk } from 'rollup'; import type { Plugin as VitePlugin } from 'vite'; import { STYLE_EXTENSIONS } from '../core/ssr/css.js'; -import { getViteResolve, getViteLoad } from './resolve.js'; import { getViteTransform, TransformHook } from '../vite-plugin-astro/styles.js'; import * as path from 'path'; +import esbuild from 'esbuild'; const PLUGIN_NAME = '@astrojs/rollup-plugin-build-css'; @@ -65,6 +65,14 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin { configResolved(resolvedConfig) { viteTransform = getViteTransform(resolvedConfig); + + const viteCSSPost = resolvedConfig.plugins.find(p => p.name === 'vite:css-post'); + if(viteCSSPost) { + // Prevent this plugin's bundling behavior from running since we need to + // do that ourselves in order to handle updating the HTML. + delete viteCSSPost.renderChunk; + delete viteCSSPost.generateBundle; + } }, async resolveId(id) { @@ -107,7 +115,7 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin { return null; }, - renderChunk(_code, chunk) { + async renderChunk(_code, chunk) { let chunkCSS = ''; let isPureCSS = true; for (const [id] of Object.entries(chunk.modules)) { @@ -120,10 +128,14 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin { } if (isPureCSS) { + const { code: minifiedCSS } = await esbuild.transform(chunkCSS, { + loader: 'css', + minify: true, + }); const referenceId = this.emitFile({ name: chunk.name + '.css', type: 'asset', - source: chunkCSS, + source: minifiedCSS, }); pureCSSChunks.add(chunk); chunkToReferenceIdMap.set(chunk.fileName, referenceId); diff --git a/packages/astro/test/astro-styles-ssr.test.js b/packages/astro/test/astro-styles-ssr.test.js index ddbd75f28..982d3f267 100644 --- a/packages/astro/test/astro-styles-ssr.test.js +++ b/packages/astro/test/astro-styles-ssr.test.js @@ -74,7 +74,7 @@ describe('Styles SSR', () => { return match; }); - expect(css).to.include(`.wrapper${scopedClass}{margin-left:auto;margin-right:auto;max-width:1200px;}.outer${scopedClass}{color:red;}`); + expect(css).to.include(`.wrapper${scopedClass}{margin-left:auto;margin-right:auto;max-width:1200px}.outer${scopedClass}{color:red}`); // test 2: element received .astro-XXXXXX class (this selector will succeed if transformed correctly) const wrapper = $(`.wrapper${scopedClass}`); @@ -108,7 +108,7 @@ describe('Styles SSR', () => { const css = await fixture.readFile(href); // test 4: CSS generates as expected - expect(css).to.include(`.blue.${scopedClass}{color:powderblue;}.color\\:blue.${scopedClass}{color:powderblue;}.visible.${scopedClass}{display:block;}`); + expect(css).to.include(`.blue.${scopedClass}{color:#b0e0e6}.color\\:blue.${scopedClass}{color:#b0e0e6}.visible.${scopedClass}{display:block}`); }); it('Astro scoped styles skipped without <style>', async () => { @@ -132,6 +132,6 @@ describe('Styles SSR', () => { const href = '/' + $('link').attr('href'); const css = await fixture.readFile(href); - expect(css).to.include('display: contents;'); + expect(css).to.include('display:contents'); }); }); @@ -106,10 +106,10 @@ "@algolia/logger-common" "4.10.5" "@algolia/requester-common" "4.10.5" -"@astrojs/compiler@^0.2.26": - version "0.2.26" - resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.2.26.tgz#676c9bc4c41682a786fc0f146a4d277602ce0294" - integrity sha512-F7nlbqBeaTilpDmQ6MAGq5dW/Sl6vikGZBHGw1g0y6frH//Ku0SasDEFd6A3FOZETHjrwUsvB7UNwCCGLhxQ+A== +"@astrojs/compiler@^0.2.27": + version "0.2.27" + resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.2.27.tgz#ab78494a9a364abdbb80f236f939f01057eec868" + integrity sha512-F5j2wzus8+BR8XmD5+KM0dP3H5ZFs62mqsMploCc7//v6DXICoaCi1rftnP84ewELLOpWX2Rxg1I3P3iIVo90A== dependencies: typescript "^4.3.5" |