ICSS:导出功能将所有密钥转换为camelCase

目标：我们正在构建一个设计系统和组件库，我们希望将CSS颜色导出为常量，以便用户可以在代码中使用实际颜色值作为字符串

解决方案：使用ICSS:export pseudo选择器访问css值，并在JS（React）中将其作为常量公开。（见以下问题：）

问题： 我们的CSS变量使用连字符表示特殊性（例如，

th确认灯--active

）。当我循环通过SASS颜色映射并设置导出对象的键值时，例如

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

并将样式导入到JS中，

name

键中的hypens已被删除，并且键已被压缩

如何防止这种情况发生？

---

使用的堆栈： 反应JS/Sass/ICSS

---

更新

我已经设法实现了一个“黑客”，经过一些修改后，它会提供我所需的信息

/**
* 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};
  }
}

所以它起作用了，但我不知道为什么

新问题：

__@each at规则中带有局部范围css变量的地方出了什么问题？我为什么要得到我所得到的？camelcasing似乎是持久的，因为两个操作中的键都是camelcased sass变量。为什么

{$name}

最终作为camelCased sass变量的值，而整个

{$name}:{$color}似乎被忽略了

__为什么它必须是局部范围的

显然，理想情况下，我可以在一个函数中完成所有这些。。。它现在起作用了，我很高兴，但我不知道它为什么起作用，这让我很沮丧；）
__