Consider migrating to Sass's AST for CSS

[Snugug]

Describe the problem

css-tree currently is lagging behind in support for key CSS features, like container queries and is not spec compliant in other semi-common corner cases (like calc in @at-rules). It may be worth considering an alternative CSS AST

Describe the proposed solution

Sass provides an AST, with Sass itself having a stellar track record of ensuring full CSS compatibility, is very well maintained, has a history of being very well maintained, and (in the general case) can reproduce 1:1 any valid input CSS without modification (meaning it shouldn't affect any current valid CSS that would hit its path). It would be interesting to consider migrating Svelte's current CSS parsing needs to Sass's AST.

Alternatives considered

Soft-forking css-tree (like is happening in the linked PR), hard-forking css-tree to add the required features and functionality, looking into other CSS utilities, or doing nothing, although none of the other solutions appears to offer the same broad CSS language support as Sass does.

Importance

would make my life easier

[benmccann]

Linking to some discussion of this: #8275 (comment)

[typhonrt]

I don't think changing the parser is appropriate at this time. The 8275 PR shows that css-tree can be extended for temporary support including single value function / calc support until css-tree is updated. This issue was filed before I updated the referenced PR w/ this support. There is no clear front runner for a css-tree replacement without significant engineering analysis into a potential new parser. There are structural code changes required to the Svelte compiler with any parser change that brings significant overhead. The appearance of broad support of another parser doesn't make it so. There is no explicit support for container query parsing in the Sass parser. There is no JS API support for the Sass API: https://github.com/sass/dart-sass/issues/88.

As mentioned in the container query discussion I'd also like to submit a follow up PR to bring media query support up to par as well using css-tree extension just like the CQ PR. This will also close #5876 and should be sufficient temporary solution with minimal impact / no overhead for core maintainers giving css-tree more time to catch up. When it does catch up the switch back from the temporary css-tree extension back to the mainline release is trivial.

I think this issue can be resolved as wont-fix once the container query and potential forthcoming media query PR is evaluated by the Svelte core maintainers.

[typhonrt]

This issue can be closed. Svelte 3.58.0 has css-tree extension for container query support. Svelte 3.59.0 will support modern media query range syntax also by css-tree extension.

[Conduitry]

Yup, closing. We don't want to switch to another parser for this. And as noted above, the Sass library does not seem to expose just the parse phase via its JS API. The Svelte compiler also outputs its AST of the component, which includes the styles, so any change to a different format there would also be a breaking change.