JSFiddle - React, Tailwind, and code Playground

by Valentin Sarychev

HTML

<div style="display: grid; grid-auto-flow: column; gap: 2px">
  <div class="source">
    <div class="Theme_fff">
      source
      <div class="Theme_000">
        one
        <div class="Theme_fff">
          two
        </div>
      </div>
    </div>
  </div>
  <div class="actual">
    <div class="Theme_fff">
      actual
      <div class="Theme_000">
        one
        <div class="Theme_fff">
          two
        </div>
      </div>
    </div>
  </div>
  <div class="expected">
    <div class="Theme_fff">
      expected
      <div class="Theme_000">
        one
        <div class="Theme_fff">
          two
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

/* original CSS */
.source {
  .Theme_fff {
    --fg: #fff;
    --bg: #0f0;
  }
  .Theme_000 {
    --fg: #000;
    --bg: #0f0;
  }
  div {
    color: var(--fg);
    background: var(--bg);
  }
}

/* mode=multi-themes */
.actual {
  .Theme_fff div {
    color: #fff;
    background: #0f0;
  }
  .Theme_000 div {
    color: #000;
    background: #0f0;
  }
}

/* expected behavior */
.expected {
  .Theme_fff {
    --fg: #fff;
  }
  .Theme_000 {
    --fg: #000;
  }
  div {
    color: var(--fg);
    background: #0f0;
  }
}