From bedfcfad4b64cabde8008a6469a37c66b69372be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=A0=20/=20green?= <green@sapphi.red>
Date: Wed, 15 Nov 2023 16:23:43 +0900
Subject: [PATCH] fix: code frame was not generated for postcss errors (#14986)

---
 packages/vite/src/node/plugins/css.ts            |  7 ++++---
 packages/vite/src/node/server/pluginContainer.ts | 10 ++--------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 1fdc0e204e4793..2f91ea93bacac0 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -1191,12 +1191,12 @@ async function compileCSS(
           code,
           {
             line: warning.line,
-            column: warning.column,
+            column: warning.column - 1, // 1-based
           },
           warning.endLine !== undefined && warning.endColumn !== undefined
             ? {
                 line: warning.endLine,
-                column: warning.endColumn,
+                column: warning.endColumn - 1, // 1-based
               }
             : undefined,
         )}`
@@ -1207,8 +1207,9 @@ async function compileCSS(
     e.message = `[postcss] ${e.message}`
     e.code = code
     e.loc = {
-      column: e.column,
+      file: e.file,
       line: e.line,
+      column: e.column - 1, // 1-based
     }
     throw e
   }
diff --git a/packages/vite/src/node/server/pluginContainer.ts b/packages/vite/src/node/server/pluginContainer.ts
index 82f1d8d5d77310..bf8c6337f8bc49 100644
--- a/packages/vite/src/node/server/pluginContainer.ts
+++ b/packages/vite/src/node/server/pluginContainer.ts
@@ -62,7 +62,6 @@ import { TraceMap, originalPositionFor } from '@jridgewell/trace-mapping'
 import MagicString from 'magic-string'
 import type { FSWatcher } from 'chokidar'
 import colors from 'picocolors'
-import type * as postcss from 'postcss'
 import type { Plugin } from '../plugin'
 import {
   cleanUrl,
@@ -429,15 +428,10 @@ export async function createPluginContainer(
     position: number | { column: number; line: number } | undefined,
     ctx: Context,
   ) {
-    const err = (
-      typeof e === 'string' ? new Error(e) : e
-    ) as postcss.CssSyntaxError & RollupError
+    const err = (typeof e === 'string' ? new Error(e) : e) as RollupError
     if (err.pluginCode) {
       return err // The plugin likely called `this.error`
     }
-    if (err.file && err.name === 'CssSyntaxError') {
-      err.id = normalizePath(err.file)
-    }
     if (ctx._activePlugin) err.plugin = ctx._activePlugin.name
     if (ctx._activeId && !err.id) err.id = ctx._activeId
     if (ctx._activeCode) {
@@ -483,7 +477,7 @@ export async function createPluginContainer(
           line: (err as any).line,
           column: (err as any).column,
         }
-        err.frame = err.frame || generateCodeFrame(err.id!, err.loc)
+        err.frame = err.frame || generateCodeFrame(ctx._activeCode, err.loc)
       }
 
       if (