Use PostCSS to check if a given string is a valid CSS (and get list of all errors)?

[Stvad]

Is it possible to use PostCSS to verify if a given string is a valid CSS and get all syntax errors if it isn't?

I've played with just running the PostCSS over the string, but in that scenario it throws CssSyntaxError for the first error it sees and does not process the rest of the string.

My use-case is that I have a service that allows users to publish websites (https://roam.garden/) and one of the inputs I have is a custom CSS field.
I want to check the CSS validity at the upload/input time vs having a website build fail later becauese webpack does not like the presented CSS 😅. And I want to present results of the check to a user on ~per line basis (via CodeMirror integration).

Stylelint seems like a fit, but it does not work in the Browser atm =\ stylelint/stylelint#4796

[ai]

Is it possible to use PostCSS to verify if a given string is a valid CSS and get all syntax errors if it isn't?

PostCSS does not check syntax inside declaration values and at-rule params.

It is better to use csstree by @lahmatiy which validates more errors.

[Stvad]

Thanks for a prompt response!

I've actually been looking into using https://github.com/csstree/validator but it seems to ignore some syntax errors 🙁(csstree/validator#21 csstree/validator#20)

[ai]

You can try to combine a simple PostCSS syntax check (without looking to declaration/at-rule content) and then run csstree.

it throws CssSyntaxError for the first error it sees and does not process the rest of the string.

This is the behavior of most parsers. Syntax error makes it impossible to keep the parser working. Anyway, the next errors will be meanless.

But you can try to fork postcss-safe-parser. Try to collect all errors and fix sources to be able to parse sourc after the error.

But I recommend you just show the first error.

[Stvad]

Thanks, I appreciate all your suggestions!

But I recommend you just show the first error.

Yeah, I'm leaning towards just doing that 😅

[johnsoncherian]

Working on a similar feature myself. Mind sharing what was the final approach you went ahead with.?
Thanks in advance @Stvad

[Stvad]

I ended up keeping https://github.com/csstree/validator