Lack of semicolon is not detected as an error

[Stvad]

Hi, thanks for building this! I'm trying to use it to validate user-input CSS in the browser before building Gatsby site with the result.

One thing that this does not seem to detect is lack of semicolons:

Say I have the following snippet

 :root {
    --header-font:"Lato", sans-serif;
    --body-font:"Open Sans", sans-serif;
    --page-color: rgba(255, 255, 255, 0.95)
    --text-color: #3f4758;
}

https://jigsaw.w3.org/css-validator/#validate_by_input would fail to validate that CSS and Gatsby/Webpack would fail when building the bundle with it. But csstree-validator does not seem to detect any issues with it 🙁

[lahmatiy]

Hi, @Stvad!
Custom Properties may have any value per spec. So rgba(255, 255, 255, 0.95) --text-color: #3f4758 will be a value of --page-color. So that's not a syntax error according to CSS specifications.
I think it's a little bit tricky to add such kind of validation, but looks possible. I'm worry about false positive matches in some cases, so it might be optional validation.

Gatsby/Webpack would fail when building the bundle with it

It's not ok. Per spec a custom property value should not to be parsed as a regular property and cause to a syntax error. In fact, such properties may contain "incomplete" values:

selector {
    --yes-it-works: , 0.95;
    color: rgba(255, 255, 255 var(--yes-it-works, ));
}