Use css-tree

[asamuzaK]

Switch to CSSTree to improve code quality.

• Add some fixes to CSSStyleDeclaration setter

Related wpts:

• to-upstream

  • css/css-syntax/parse-invalid-input.html

• css/cssom

  • serialization-CSSDeclaration-with-important.html

• css/css-color

  • light-dark-currentcolor-in-color.html
    Fails but this is expected. Need to fix getComputedStyle()

[domenic]

It would be nice if jsdom only had one CSS parser in its dependency tree. jsdom/jsdom#3910 is trying to replace rrweb-cssom with a better replacement. Maybe jsdom should use csstree instead as well?

[domenic]

Well, I guess we cannot eliminate some cssom package because that's how we currently implement many objects... https://github.com/jsdom/jsdom/blob/aa52984e863d2722fb8beae757d7ea5568cea1b2/lib/jsdom/level2/style.js#L23-L30

Still, it is a good goal to eventually have just a single parser.

Maybe we can just implement the objects from scratch inside jsdom, and delegate the hard parsing/serialization work to csstree. For example, https://drafts.csswg.org/cssom/#the-medialist-interface looks pretty easy to do from scratch as long as you have an algorithm media query parsing and serialization.

[asamuzaK]

I am aware that a PR to replace rrweb-cssom has been submitted.
I'm looking forward to seeing a replacement, since rrweb-cssom doesn't seem to be actively maintained.

Apart from that, this PR aims to resolve some inconsistencies with cssstyle.
cssstyle is described as a fork of the CSSStyleDeclaration part of NV/CSSOM.
https://github.com/jsdom/cssstyle/blob/main/lib/CSSStyleDeclaration.js#L2

However, what it actually does is parse CSS values using the original CSSStyleDeclaration from NV/CSSOM (now rrweb-cssom).
Very weird implementation...

dummyRule = CSSOM.parse(`#bogus{${value}}`).cssRules[0].style;

Ideally, cssstyle should take the place of the CSSStyleDeclaration part, but what happens if we add cssstyle as a dependency to rrweb-cssom?
Circular dependency.

That's why I want to remove rrweb-cssom from cssstyle.

CSSTree is a great library, but implementing CSSOM-related things and CSSStyleDeclaration will likely require complex processing from the AST.
So I personally think it's better to only use it partially, rather than as a single CSS parser for jsdom.

[asamuzaK]

I will give my thoughts on #235 separately.

Anyway, I will request a review for this PR.
The wpt test is at https://github.com/jsdom/jsdom/blob/main/test/web-platform-tests/to-upstream/css/css-syntax/parse-invalid-input.html
There is a caveat that @asamuzakjp/css-color supports light-dark(), but css-tree not yet, so wpt test related to light-dark() fails.
It turns out that something that should have failed had mistakenly passed.

[asamuzaK]

Ah, found https://github.com/csstools/postcss-plugins/tree/main/packages/css-syntax-patches-for-csstree
i will add one more push.

[asamuzaK]

PR ready

[domenic]

Why did you remove @csstools/css-syntax-patches-for-csstree? (Also, when you do add it, we should add a test which depends on that package existing.)

[asamuzaK]

Why did you remove @csstools/css-syntax-patches-for-csstree? (Also, when you do add it, we should add a test which depends on that package existing.)

It is useful for cssTree.lexer.
I did expected that it also change result in cssTree.parse, but it did not.
So removed.

[asamuzaK]

cssTree.lexer is very powerful and it can probably replace our isValid functions under properties/.
But thats another issue and I will take a look later.

[asamuzaK]

Changed my mind and decided to implement isValidPropertyValue() now.
Currently it only applies to CSSStyleDecoration.

[domenic]

I am a little worried that we only replaced one instance of parseKeyword(), and left all the existing ones alone. However, I cannot see any obvious cases where this halfway state would cause problems, so I will merge this.

I would love it if you were able to open an issue detailing your plans for replacing more and more parts of this library with css-tree. (Or maybe discussing in #235 is best.)

[asamuzaK]

Could you please release a new version?
Then I can start working on fixing jsdom/jsdom#3895 and else.

[domenic]

Done. Thank you for your work!