Compile non-root CSS custom property

Question

Are there any tools to compile CSS custom properties declared at not :root rule? I want following code with custom properties

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

be compiled to their non-custom-prop equivalents like that

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

The goal is to

• switch color schemes by switching dark/light class on root DOM element
• use valid css syntax (no sass less)
• keep rules code compact

Answer 1

It's actually not safe to do that. I can tell you because I tried so hard to make a safe transformation. But I failed.

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