pretty print errors

[jonathanong]

any way to print the context of an error with a ^ pointing to where the error occured?

{ [Error: Can't parse CSS: Missing property value at line 3:1]
  source: ':root {\n  --\n}\n',
  file: undefined,
  line: 3,
  column: 1,
  message: 'Can\'t parse CSS: Missing property value at line 3:1' }

[ai]

Like error.highlighted property with broken line and ^ on next line?

[jonathanong]

i don't know what that means. i was thinking of a utility like:

try {
  postcss(string)
} catch (err) {
  console.error(postcss.formatError(err))
}

and it'll print something like:

Can't parse CSS: Missing property value at line 3:1

:root {
  --
  ^
}

[ai]

Prev and next line?

[jonathanong]

yep. need some context

[lydell]

Couldn't this be usable as a separate module?

try {
  whatever(code)
} catch (error) {
  console.error(error.message + "\n\n" + markError(code, error.line, error.column))
}

[jonathanong]

Yup. As long as I can use it!

[ai]

@lydell I think it should be part of PostCSS, because good error formating is important for most of PostCSS users.

[ai]

@lydell @jonathanong what do you think about this API:

try {
    postcss(string)
} catch (err) {
    console.error(err.messageWithCSS())
}

[lydell]

Then why not do both? Postcss could use the separate module as a dependency.

[ai]

@lydell because this module will be PostCSS specific. Easier way is a just add method to CssSyntaxError class.

[jonathanong]

should be fine.

would be even better to do add COLORS!!! console.error(err.messageWithCSSAndColors())!

[ai]

Done dd5b227

I add CssSyntaxError#highlight() method, which returns broken example. It autodetect color support and use color if it is possible and user don’t disable it in Node.

Also CssSyntaxError#toString() now returns this.message + "\n" + this.highlight().