support for parsing incomplete css based on a previous parser state

[jantimon]

we are currently developing a build time CSS-in-JS library named next-yak, which is in an experimental phase

our first tests on the largest swiss e-commerce platform Galaxus have shown significant performance gains especially for SSR and INP (you can read even more of our journey here)

one goal is to keep the API very close to styled-components to allow a smooth migration of thousands of components and to allow our frontend developers to keep using their existing knowledge

as next-yak operates at build time similar to linaria we can't execute js code at runtime like styled-component does. This approach introduces a uncommon challenge: dealing with incomplete CSS fragments followed by JavaScript expressions - e.g:

import backgroundMixin from "foo";

const ToggleButton = styled.button`
${backgroundMixin}
@supports (hover) {
 /* ${unusedExpressionInComment} */
 ${props => props.$active
    ? css`background-color: green;
        &:hover {
          color: black;
         }`
    : css`background-color: lime;
         height: ${props.height}px;
         width: 100%`
 };
 color: white;
 padding: 10px 20px;
}
`;

For parsing the CSS we would love to use the lightning css crate

However, to deal with the incomplete CSS inside the template literal quasis we would have to pause the CSS parsing process after the end of each template quasi to understand the context of the following JavaScript expression

For example height: ${props.height}px; is tricky as next-yak compiles it to height: var(--height); (a css variable without the unit).
So in this case we would need to know that the expression is part of a property value (and outside of a comment or string)

An expression might also be a dynamic mixin. In these cases we would need to know the current surrounding selector scopes and at rules.

Our question is: Does Lightning CSS support or could potentially support a feature where we can pause parsing (so we can convert or even evaluate JavaScript expressions) and then resume parsing?

Here is a very naive js stackblitz example which is able of parsing css snippets in the context of a previous snippet:

https://stackblitz.com/edit/vitest-dev-vitest-uht4j5?file=src%2FtoCss.ts,test%2FparseCss.test.ts,test%2FtoCss.test.ts,src%2FparseCss.ts&initialPath=__vitest__/

I wouldn't be surprised if this is out of scope for lightning css as it's a rather uncommon requirement