css - 编译非根 CSS 自定义属性

Question

是否有任何工具可以编译声明为 not :root 规则的 CSS 自定义属性？我想要以下带有自定义属性的代码

.dark {
  --bg-color: black;
  --fg-color: white;
}

.light {
  --bg-color: white;
  --fg-color: black;
}

.foo {
  background: var(--bg-color);
  display: block;
}

.bar {
  color: var(--fg-color);
  display: inline;
}

像那样编译成它们的非自定义 Prop 等价物

.light .foo, .light.foo {
  background: white;
}

.dark .foo, .dark.foo {
  background: black;
}

.light .bar, .light.bar {
  color: black;
}

.dark .bar, .dark.bar {
  color: white;
}

.foo {
  display: block;
}

.bar {
  display: inline;
}

目标是

• 通过在根 DOM 元素上切换深色/浅色类来切换配色方案
• 使用有效的 css 语法(不能少 sass)
• 保持规则代码紧凑

Answer 1

这样做实际上并不安全。我可以告诉你，因为我非常努力地进行安全转换。但是我失败了。

https://github.com/postcss/postcss-custom-properties/issues/1