Upgrade babel code frame (#1902)

* Upgrade babel code frame

* Get better marker for parsing errors in postcss-values-parser

package.json

@@ -11,7 +11,7 @@
   "main": "./index.js",
   "dependencies": {},
   "devDependencies": {
-    "babel-code-frame": "6.22.0",
+    "babel-code-frame": "7.0.0-alpha.12",
     "babylon": "7.0.0-beta.10",
     "chalk": "1.1.3",
     "cross-spawn": "5.1.0",

parser.js

@@ -20,7 +20,7 @@ function parse(text, opts) {
 
     if (loc) {
       const codeFrame = require("babel-code-frame");
-      error.codeFrame = codeFrame(text, loc.line, loc.column, {
+      error.codeFrame = codeFrame.codeFrameColumns(text, loc, {
         highlightCode: true
       });
       error.message += "\n" + error.codeFrame;

src/parser-babylon.js

@@ -40,8 +40,12 @@ function parse(text) {
         // so we need our custom error
         originalError.message
           .replace(/ \(.*\)/, ""),
-        originalError.loc.line,
+        {
-        originalError.loc.column + 1
+          start: {
+            line: originalError.loc.line,
+            column: originalError.loc.column + 1
+          }
+        }
       );
     }
   }

src/parser-create-error.js

@@ -1,9 +1,11 @@
 "use strict";
 
-function createError(message, line, column) {
+function createError(message, loc) {
   // Construct an error similar to the ones thrown by Babylon.
-  const error = new SyntaxError(message + " (" + line + ":" + column + ")");
+  const error = new SyntaxError(
-  error.loc = { line, column };
+    message + " (" + loc.start.line + ":" + loc.start.column + ")"
+  );
+  error.loc = loc;
   return error;
 }
 

src/parser-flow.js

@@ -14,11 +14,11 @@ function parse(text) {
   });
 
   if (ast.errors.length > 0) {
-    throw createError(
+    const loc = ast.errors[0].loc;
-      ast.errors[0].message,
+    throw createError(ast.errors[0].message, {
-      ast.errors[0].loc.start.line,
+      start: { line: loc.start.line, column: loc.start.column + 1 },
-      ast.errors[0].loc.start.column + 1
+      end: { line: loc.end.line, column: loc.end.column + 1 }
-    );
+    });
   }
 
   includeShebang(text, ast);

src/parser-postcss.js

@@ -27,9 +27,10 @@ function parseValueNodes(nodes) {
   const commaGroupStack = [commaGroup];
 
   for (let i = 0; i < nodes.length; ++i) {
-    if (nodes[i].type === "paren" && nodes[i].value === "(") {
+    const node = nodes[i];
+    if (node.type === "paren" && node.value === "(") {
       parenGroup = {
-        open: nodes[i],
+        open: node,
         close: null,
         groups: [],
         type: "paren_group"
@@ -41,11 +42,11 @@ function parseValueNodes(nodes) {
         type: "comma_group"
       };
       commaGroupStack.push(commaGroup);
-    } else if (nodes[i].type === "paren" && nodes[i].value === ")") {
+    } else if (node.type === "paren" && node.value === ")") {
       if (commaGroup.groups.length) {
         parenGroup.groups.push(commaGroup);
       }
-      parenGroup.close = nodes[i];
+      parenGroup.close = node;
 
       if (commaGroupStack.length === 1) {
         throw new Error("Unbalanced parenthesis");
@@ -57,7 +58,7 @@ function parseValueNodes(nodes) {
 
       parenGroupStack.pop();
       parenGroup = parenGroupStack[parenGroupStack.length - 1];
-    } else if (nodes[i].type === "comma") {
+    } else if (node.type === "comma") {
       parenGroup.groups.push(commaGroup);
       commaGroup = {
         groups: [],
@@ -65,7 +66,7 @@ function parseValueNodes(nodes) {
       };
       commaGroupStack[commaGroupStack.length - 1] = commaGroup;
     } else {
-      commaGroup.groups.push(nodes[i]);
+      commaGroup.groups.push(node);
     }
   }
   if (commaGroup.groups.length > 0) {
@@ -172,12 +173,9 @@ function parseNestedCSS(node) {
       try {
         node.value = parseValue(node.value);
       } catch (e) {
-        const line = +(e.toString().match(/line: ([0-9]+)/) || [1, 1])[1];
-        const column = +(e.toString().match(/column ([0-9]+)/) || [0, 0])[1];
         throw createError(
           "(postcss-values-parser) " + e.toString(),
-          node.source.start.line + line - 1,
+          node.source
-          node.source.start.column + column + node.prop.length
         );
       }
     }
@@ -196,7 +194,7 @@ function parseWithParser(parser, text) {
     if (typeof e.line !== "number") {
       throw e;
     }
-    throw createError("(postcss) " + e.name + " " + e.reason, e.line, e.column);
+    throw createError("(postcss) " + e.name + " " + e.reason, { start: e });
   }
   const prefixedResult = addTypePrefix(result, "css-");
   const parsedResult = parseNestedCSS(prefixedResult);

src/parser-typescript.js

@@ -15,7 +15,9 @@ function parse(text) {
       ast = tryParseTypeScript(text, !jsx);
     }
   } catch (e) {
-    throw createError(e.message, e.lineNumber, e.column + 1);
+    throw createError(e.message, {
+      start: { line: e.lineNumber, column: e.column + 1 }
+    });
   }
 
   delete ast.tokens;

yarn.lock

@@ -195,7 +195,15 @@ aws4@^1.2.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
-babel-code-frame@6.22.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
+babel-code-frame@7.0.0-alpha.12:
+  version "7.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-7.0.0-alpha.12.tgz#26fbb2eab1c20763271fecb6b04a108756fae61f"
+  dependencies:
+    chalk "^1.1.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
+babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
   dependencies: