Fix Sass WASM crashes (#2049)

Partially addresses #2032

.changeset/honest-knives-bake.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Bugfix: Sass compile errors cause compiler panic

packages/astro/src/vite-plugin-astro/index.ts

@@ -6,7 +6,6 @@ import type { AstroConfig } from '../@types/astro';
 import esbuild from 'esbuild';
 import fs from 'fs';
 import { fileURLToPath } from 'url';
-import os from 'os';
 import { transform } from '@astrojs/compiler';
 import { AstroDevServer } from '../core/dev/index.js';
 import { getViteTransform, TransformHook, transformWithVite } from './styles.js';
@@ -32,13 +31,11 @@ function isSSR(options: undefined | boolean | { ssr: boolean }): boolean {
 
 /** Transform .astro files for Vite */
 export default function astro({ config, devServer }: AstroPluginOptions): vite.Plugin {
- let platform: NodeJS.Platform;
  let viteTransform: TransformHook;
  return {
  name: '@astrojs/vite-plugin-astro',
  enforce: 'pre', // run transforms before other plugins can
  configResolved(resolvedConfig) {
- platform = os.platform(); // TODO: remove macOS hack
  viteTransform = getViteTransform(resolvedConfig);
  },
  // note: don’t claim .astro files with resolveId() — it prevents Vite from transpiling the final JS (import.meta.globEager, etc.)
@@ -52,6 +49,7 @@ export default function astro({ config, devServer }: AstroPluginOptions): vite.P
  const isPage = normalizedID.startsWith(fileURLToPath(config.pages)) || normalizedID.startsWith(fileURLToPath(config.layouts));
  let source = await fs.promises.readFile(id, 'utf8');
  let tsResult: TransformResult | undefined;
+ let cssTransformError: Error | undefined;
 
  try {
  // Transform from `.astro` to valid `.ts`
@@ -65,23 +63,29 @@ export default function astro({ config, devServer }: AstroPluginOptions): vite.P
  internalURL: 'astro/internal',
  preprocessStyle: async (value: string, attrs: Record<string, string>) => {
  const lang = `.${attrs?.lang || 'css'}`.toLowerCase();
- const result = await transformWithVite({ value, lang, id, transformHook: viteTransform, ssr: isSSR(opts) });
- if (!result) {
- // TODO: compiler supports `null`, but types don't yet
- return result as any;
- }
- let map: SourceMapInput | undefined;
- if (result.map) {
- if (typeof result.map === 'string') {
- map = result.map;
- } else if (result.map.mappings) {
- map = result.map.toString();
+ try {
+ const result = await transformWithVite({ value, lang, id, transformHook: viteTransform, ssr: isSSR(opts) });
+ let map: SourceMapInput | undefined;
+ if (!result) return null as any; // TODO: add type in compiler to fix "any"
+ if (result.map) {
+ if (typeof result.map === 'string') {
+ map = result.map;
+ } else if (result.map.mappings) {
+ map = result.map.toString();
+ }
  }
+ return { code: result.code, map };
+ } catch (err) {
+ // save error to throw in plugin context
+ cssTransformError = err as any;
+ return null;
  }
- return { code: result.code, map };
  },
  });
 
+ // throw CSS transform errors here if encountered
+ if (cssTransformError) throw cssTransformError;
+
  // Compile `.ts` to `.js`
  const { code, map } = await esbuild.transform(tsResult.code, { loader: 'ts', sourcemap: 'external', sourcefile: id });
 

packages/astro/test/fixtures/sass/src/pages/error.astro

@@ -0,0 +1,7 @@
+<style lang="scss">
+ $blue: blue;
+
+ .h1 {
+ color: $red; // undefined!
+ }
+</style>

packages/astro/test/sass.test.js

@@ -0,0 +1,23 @@
+import { expect } from 'chai';
+import { loadFixture } from './test-utils.js';
+
+// note: many Sass tests live in 0-css.test.js to test within context of a framework.
+// these tests are independent of framework.
+describe('Sass', () => {
+ let fixture;
+ let devServer;
+
+ before(async () => {
+ fixture = await loadFixture({ projectRoot: './fixtures/sass/' });
+ devServer = await fixture.startDevServer();
+ });
+
+ after(async () => {
+ devServer && (await devServer.stop());
+ });
+
+ it('shows helpful error on failure', async () => {
+ const res = await fixture.fetch('/error').then((res) => res.text());
+ expect(res).to.include('Undefined variable');
+ });
+});