remove `:root` limitation by injecting rules with new declarations that just contains modified properties.

[MoOx]

ref reworkcss/rework-vars#30

[iamvdo]

You can't do that because of unknown DOM structure, check example:

<button class="btn btn--active"></button>

.btn {
   --bg: red;
   background: var(--bg);
}
.btn--active {
  --bg: green;
}

The button should be green. You can't fallback this case with post-processor.

[MoOx]

.btn {
   background: red;
}

.btn .btn--active,
.btn--active.btn,
.btn--active .btn {
  background: green;
}

What about this ?

[MoOx]

You don't care about the dom, you can just output all the possible selectors.
I've to admit it can seems stupid, but this should work.

[MoOx]

(I've update the possible output above)

[iamvdo]

How you make relation between .btn and .btn--active, this could also be h1 and .title ?

BTW, the only solution I think is using Phantom as uncss does. I checked a bit but it seems rather too complicated for me ;)

[MoOx]

You know both selectors use the same custom property name.

We are actually doing 2 pass (one to read values, one to replace). We can just create a smarter map with not just name-> value, but selector/name/value (and/or name/selector/value).

[MoOx]

selector/name/value & name/selector/declaration should do the trick (or something like that)
I've to think about that just a bit, but it's doable.

[iamvdo]

You know both selectors use the same custom property name.

Nope.

.title {
   background: var(--bg);
}
h1 {
  --bg: green;
}
h2 {
  --bg: red;
}

[iamvdo]

Knowing DOM structure is essential.

[MoOx]

You know that .title use --bg.
You know that h1,h2 declarage --bg so you know you will have to make a link between .title & h1,h2.

You can inject the following rules

.title {
   background: var(--bg);
}

h1 {
  --bg: green;
}

/* injected code */
.title h1,
h1.title,
h1 .title {
  background: green;
}

h2 {
  --bg: red;
}

/* injected code */
.title h2,
h2.title,
h2 .title {
  background: red;
}

[iamvdo]

you know you will have to make a link between .title & h1,h2.

Not necessarily. You can use same variable names many times.

[bloodyowl]

[MoOx]

That's why I'm talking about 2 tuples name/selector/declaration and selector/name/value.
If you have others interesting examples to share I'm eager to read those so I can make rock solid tests :)