chain classes for matching P3 themes

[jjenzz]

if we have two selectors with matching P3 themes, would it be possible to chain the selectors to reduce some of the duplication?

i was hoping for output like:

:root, [data-theme="light"] {
  --color_violet10: #654dc4;
  --color_violet11: #6550b9;
  --color_violet9: #6e56cf;
  --color_white: #fff;
}

@supports (color: color(display-p3 0 0 0)) {
  :root, [data-theme="light"] {
    --color_violet10: color(display-p3 .381 .306 .741);
    --color_violet11: color(display-p3 .383 .317 .702);
    --color_violet9: color(display-p3 .417 .341 .784);
    --color_white: color(display-p3 1 1 1);
  }
}

i can workaround this myself ofc in the meantime, but thought it might be a nice improvement ☺️

[devongovett]

what happens is that we process the first rule (:root), that generates a @supports rule after it, then we process the second rule ([data-theme="light"]), and at this point, it is no longer adjacent with the original :root rule so can no longer be merged (normally that could cause ordering issues).

So this would either require lookahead, to determine that the next rule is the same, and merge them before adding the @supports fallback, or somehow tracking that the @supports rule was generated and not in the original stylesheet and therefore does not affect order.