You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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:
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:
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 toheight: 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
The text was updated successfully, but these errors were encountered: