Start of fixing multiple CSS issue (#1838)

* Start of fixing multiple CSS issue

* Update tests to work with compiled output

* Fix linting

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');
   });
 });
diff --git a/yarn.lock b/yarn.lock
index e33f0f691..feac9266f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"