:export ICSS rule
The docs currently say the :import and :export ICSS rules are not supported. Is there any plan to add support, specifically for :export? In our codebase we use css modules precompiled with sass and use :export to expose values defined in sass variables to JS.
Example:
$row-count: 4;
:export {
rowCount: $row-count;
}
.list {
display: grid;
grid-template-columns: repeat($row-count, 1fr);
}
Can you use CSS variables for this?
In our case we want to access the value in both CSS and in JS with the source of truth being in one place in the CSS file.
I'd love to see this too. I was planning on using lightningcss for a project but unfortunately this breaks my use case completely.
Yes, specifically the ICSS :export rule is very useful.
Another use case is when generating inline SVG in React, if you want to align some HTML elements with certain features of the SVG image. You can then define the relevant metrics of the SVG image in a sass file (such as image dimensions and selected other parameters) and use :export to have the guaranteed same values available for calc() operations in sass/css (to do the alignment) and for drawing the actual SVG image.