fix: properly format css pre-processor errors from @imported files

fix #1600, close #1601
vitejs · Jan 20, 2021 · ec18bde · ec18bde
1 parent 1c62706
commit ec18bde
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -517,6 +517,9 @@ const scss: StylePreprocessor = async (source, map, options) => {
 
     return { code: result.css.toString(), errors: [], deps }
   } catch (e) {
+    // normalize SASS error
+    e.id = e.file
+    e.frame = e.formatted
     return { code: '', errors: [e], deps: [] }
   }
 }
@@ -529,6 +532,7 @@ const sass: StylePreprocessor = (source, map, options) =>
 
 // .less
 interface LessError {
+  filename: string
   message: string
   line: number
   column: number
@@ -552,7 +556,7 @@ const less: StylePreprocessor = (source, map, options) => {
     // normalize error info
     const normalizedError: RollupError = new Error(error!.message)
     normalizedError.loc = {
-      file: options.filename,
+      file: error!.filename || options.filename,
       line: error!.line,
       column: error!.column
     }

diff --git a/packages/vite/src/node/server/pluginContainer.ts b/packages/vite/src/node/server/pluginContainer.ts
@@ -300,15 +300,23 @@ export async function createPluginContainer(
           ...numberToPos(ctx._activeCode, pos)
         }
         err.frame = err.frame || generateCodeFrame(ctx._activeCode, pos)
+      } else if (err.loc) {
+        // css preprocessors may report errors in an included file
+        if (!err.frame) {
+          let code = ctx._activeCode
+          if (err.loc.file) {
+            err.id = normalizePath(err.loc.file)
+            code = fs.readFileSync(err.loc.file, 'utf-8')
+          }
+          err.frame = generateCodeFrame(code, err.loc)
+        }
       } else if ((err as any).line && (err as any).column) {
         err.loc = {
           file: err.id,
           line: (err as any).line,
           column: (err as any).column
         }
         err.frame = err.frame || generateCodeFrame(ctx._activeCode, err.loc)
-      } else if (err.loc) {
-        err.frame = err.frame || generateCodeFrame(ctx._activeCode, err.loc)
       }
     }
     return err

diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
@@ -201,7 +201,7 @@ export function posToNumber(
   const { line, column } = pos
   let start = 0
   for (let i = 0; i < line - 1; i++) {
-    start += lines[i].length
+    start += lines[i].length + 1
   }
   return start + column
 }