ICSS :export function converts all keys to camelCase

Question

Goal: We're building a design system and component library and we would like to export our CSS colors as constants so the users can use the actual color values as strings in their code.

Solution: using the ICSS :export pseudo-selector to access the css values and expose them as constants in JS (React). (See the following SO question: Exporting SCSS Variables to JS (auto looping variables))

Problem: Our CSS variables use a hyphens to denote specificity (e.g. th-confirm-light--active). When I loop through the SASS map of colors and set the key-value of the exported object, e.g.

:export {
  @each $name, $color in $colors {
    #{$name}: #{$color};
  }
}

and import the styles into JS, the hypens in the name keys have been removed and the keys have been camelcased.

How can I prevent this from happening?

Stack used: ReactJS / Sass / ICSS

Update

I've managed to implement a 'hack' that, after some alterations, gives me the required information.

/**
* The icss :export pseudo-selector exports key-value pairs of the shape [camelCasedSassVariableName]: [sass variable string value].
*/

:export {
  @each $name, $color in $colors {
    #{$name}: #{$color};
  }
}

/**
* The variables have to be locally scoped otherwise an empty object is exported.
* Both @each at-rules return the intact sass variable names (i.e. with hyphens) and generate key-value pairs of the shape [camelCasedSassVariableName]: `{name of file}--{sass variable name}
*/

@each $name, $color in $colors {
  :local(.#{$name}) {
    #{$name}: #{$color};
  }
}

So it works, but I have no idea why.

New questions:

__ What goes wrong in the @each at-rule with the locally scoped css variables? Why do I obtain what I obtain? It seems the camelcasing is persistent, as the keys in both operations are the camelcased sass variables. Why does the .#{$name} ends up as the value to the camelCased sass variable, and does the entire #{$name}: #{$color}; seem to be ignored?

__ Why does it have to be locally scoped?

Obviously, ideally, I would be able to do all of this in one function... It works now, and I'm glad, but I'm in the dark as to why it works and that frustrates me ;) __

ICSS :export function converts all keys to camelCase

0 Answers0