From a3928016cc375842cf47e7a227835cd17e48a409 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Tue, 27 Jun 2023 21:16:43 +0800
Subject: [PATCH] Fix CSS error line offset (#7491)

---
 .changeset/perfect-moose-end.md                 |  5 +++++
 packages/astro/e2e/errors.test.js               | 17 +++++++++++++++++
 packages/astro/e2e/fixtures/errors/package.json |  1 +
 .../errors/src/pages/astro-sass-error.astro     |  5 +++++
 packages/astro/src/core/compile/style.ts        |  6 +++---
 pnpm-lock.yaml                                  |  7 +++----
 6 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/perfect-moose-end.md
 create mode 100644 packages/astro/e2e/fixtures/errors/src/pages/astro-sass-error.astro

diff --git a/.changeset/perfect-moose-end.md b/.changeset/perfect-moose-end.md
new file mode 100644
index 000000000000..c5aebb980817
--- /dev/null
+++ b/.changeset/perfect-moose-end.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix CSS error line offset
diff --git a/packages/astro/e2e/errors.test.js b/packages/astro/e2e/errors.test.js
index 2055f1cdf0d7..9276370f5284 100644
--- a/packages/astro/e2e/errors.test.js
+++ b/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' });
 
diff --git a/packages/astro/e2e/fixtures/errors/package.json b/packages/astro/e2e/fixtures/errors/package.json
index c535e5001de4..6f3d22291bff 100644
--- a/packages/astro/e2e/fixtures/errors/package.json
+++ b/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"
diff --git a/packages/astro/e2e/fixtures/errors/src/pages/astro-sass-error.astro b/packages/astro/e2e/fixtures/errors/src/pages/astro-sass-error.astro
new file mode 100644
index 000000000000..8566cc47fd09
--- /dev/null
+++ b/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>
diff --git a/packages/astro/src/core/compile/style.ts b/packages/astro/src/core/compile/style.ts
index 4ac1cdc70652..347f830295f2 100644
--- a/packages/astro/src/core/compile/style.ts
+++ b/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') {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f05d34d10459..c355724637dc 100644
--- a/pnpm-lock.yaml
+++ b/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