Postcss Syntax Errors silently

So I am currently setting up a project with just postcss and dropping scss completely. One thing I'm struggling with is the lack of any error reporting if there is a syntax fail.

So for example I've add precss plugin and when I spell a variable wrong:

$somevar: #000;
.body{
  color:$oopsvar;
}

Obviously in SCSS it would throw an error and tell me $oopsvar doesn't exist. But it just parses it and returns:

.body{
  color:$oopsvar;
}

Which obviously isn't valid. I've added postcss-reporter, postcss-devtools and even tried to see if there is any rules in stylelint that might show the error, but nothing.

Now I'm not sure if it's just an issue with the plugins Like precss or something overall that I'm missing with postcss. How do other people debug the postcss, or do people just check the browser?

Solution

So I did some investigation and chatted on postcss gitter

There is a built in way of displaying warnings and errors in postcss, however due to the plugin approach it up to the individual plugin creators to implement. The issue I had with precss which isn't being maintained so was the issue that they weren't displaying any warning. We've moved more towards cssnext which is well maintained, although the syntax is slightly different as it uses proposed css variables rather scss syntax.

You'll also need postcss-reporter to get the warnings and errors if they are implemented.