lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

:export ICSS rule

Open robrichard opened this issue 3 years ago • 10 comments

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);
}

robrichard avatar Jan 20 '23 19:01 robrichard

Can you use CSS variables for this?

devongovett avatar Jan 26 '23 02:01 devongovett

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.

robrichard avatar Feb 11 '23 03:02 robrichard

I'd love to see this too. I was planning on using lightningcss for a project but unfortunately this breaks my use case completely.

WoLfulus avatar Apr 02 '23 00:04 WoLfulus

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.

OttoG avatar May 06 '24 23:05 OttoG