Add light-dark() support

[VladBrok]

Closes #25

If we try to convert code from this:

a {
  color: light-dark(black, white);
}

To this:

:where(html.is-light) a {
  color: black;
}
:where(html.is-dark) a {
  color: white;
}

Then it will not respect the user's preferred color scheme specified via system settings.
So we also need to use prefers-color-scheme media query.
This plugin already can transform prefers-color-scheme, so if we convert this:

a {
  color: light-dark(black, white);
}

To this:

@media (prefers-color-scheme: dark) {
  a {
    color: white;
  }
}

@media (prefers-color-scheme: light) {
  a {
    color: black;
  }
}

then the current plugin code will run and we will get the following:

@media (prefers-color-scheme: dark) {
  :where(html:not(.is-light)) a {
    color: white;
  }
}
:where(html.is-dark) a {
  color: white;
}

@media (prefers-color-scheme: light) {
  :where(html:not(.is-dark)) a {
    color: black;
  }
}
:where(html.is-light) a {
  color: black;
}

[ai]

Too complex. Just add lines to the main example.

[ai]

Let’s move postcss at the end, since it is complex arg

[ai]

Space will not work if you apply it after minification.

Do we have it originally? If not, let’s just remove space.

[ai]

I am not sure that all decl should start from ligh-dark().

What about: border-color: black light-dark(black, white)

[ai]

Can we have multiple light-dark() in the value?

[VladBrok]

indeed, we might have something like radial-gradient() which can include multiple light-dark()

we can also have light-dark() inside strings, in which case we should not touch it

[ai]

Thanks!

Do you have Twitter and Mastodon to mention you?

[VladBrok]

Thanks!

Do you have Twitter and Mastodon to mention you?

yes, I have Twitter: https://twitter.com/VladBrok99