Fix CSS error line offset (#7491)

.changeset/perfect-moose-end.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix CSS error line offset

packages/astro/e2e/errors.test.js

@@ -81,6 +81,23 @@ test.describe('Error display', () => {
 		expect(fileLocation).toMatch(/^components\/PreactRuntimeError.jsx/);
 	});
 
+	test('shows correct line when a style preprocess has an error', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/astro-sass-error'), { waitUntil: 'networkidle' });
+
+		const { fileLocation, absoluteFileLocation } = await getErrorOverlayContent(page);
+		const absoluteFileUrl = 'file://' + absoluteFileLocation.replace(/:\d+:\d+$/, '');
+
+		const fileExists = astro.pathExists(absoluteFileUrl);
+		expect(fileExists).toBeTruthy();
+
+		const fileContent = await astro.readFile(absoluteFileUrl);
+		const lineNumber = absoluteFileLocation.match(/:(\d+):\d+$/)[1];
+		const highlightedLine = fileContent.split('\n')[lineNumber - 1];
+		expect(highlightedLine).toContain(`@use '../styles/inexistent' as *;`);
+
+		expect(fileLocation).toMatch(/^pages\/astro-sass-error.astro/);
+	});
+
 	test('framework errors recover when fixed', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/svelte-syntax-error'), { waitUntil: 'networkidle' });
 

packages/astro/e2e/fixtures/errors/package.json

@@ -12,6 +12,7 @@
     "preact": "^10.15.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "sass": "^1.63.4",
     "solid-js": "^1.7.6",
     "svelte": "^3.59.1",
     "vue": "^3.3.4"

packages/astro/e2e/fixtures/errors/src/pages/astro-sass-error.astro

@@ -0,0 +1,5 @@
+<h1>test</h1>
+
+<style lang="scss">
+  @use '../styles/inexistent' as *;
+</style>

packages/astro/src/core/compile/style.ts

@@ -36,7 +36,7 @@ export function createStylePreprocessor({
 			return { code: result.code, map };
 		} catch (err: any) {
 			try {
-				err = enhanceCSSError(err, filename);
+				err = enhanceCSSError(err, filename, content);
 			} catch {}
 			cssTransformErrors.push(err);
 			return { error: err + '' };
@@ -44,9 +44,9 @@ export function createStylePreprocessor({
 	};
 }
 
-function enhanceCSSError(err: any, filename: string) {
+function enhanceCSSError(err: any, filename: string, cssContent: string) {
 	const fileContent = fs.readFileSync(filename).toString();
-	const styleTagBeginning = fileContent.indexOf(err.input?.source ?? err.code);
+	const styleTagBeginning = fileContent.indexOf(cssContent);
 
 	// PostCSS Syntax Error
 	if (err.name === 'CssSyntaxError') {

pnpm-lock.yaml

@@ -968,6 +968,9 @@ importers:
       react-dom:
         specifier: ^18.1.0
         version: 18.2.0(react@18.2.0)
+      sass:
+        specifier: ^1.63.4
+        version: 1.63.4
       solid-js:
         specifier: ^1.7.6
         version: 1.7.6
@@ -18112,25 +18115,21 @@ packages:
   file:packages/astro/test/fixtures/css-assets/packages/font-awesome:
     resolution: {directory: packages/astro/test/fixtures/css-assets/packages/font-awesome, type: directory}
     name: '@test/astro-font-awesome-package'
-    version: 0.0.1
     dev: false
 
   file:packages/astro/test/fixtures/multiple-renderers/renderers/one:
     resolution: {directory: packages/astro/test/fixtures/multiple-renderers/renderers/one, type: directory}
     name: '@test/astro-renderer-one'
-    version: 1.0.0
     dev: false
 
   file:packages/astro/test/fixtures/multiple-renderers/renderers/two:
     resolution: {directory: packages/astro/test/fixtures/multiple-renderers/renderers/two, type: directory}
     name: '@test/astro-renderer-two'
-    version: 1.0.0
     dev: false
 
   file:packages/astro/test/fixtures/solid-component/deps/solid-jsx-component:
     resolution: {directory: packages/astro/test/fixtures/solid-component/deps/solid-jsx-component, type: directory}
     name: '@test/solid-jsx-component'
-    version: 0.0.0
     dependencies:
       solid-js: 1.7.6
     dev: false