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,17 +36,17 @@ 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 + '' };
 		}
 	};
 }
 
-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') {