feat(plugin-css): Add support for color-scheme property

[nlemoine]

Changes

Provide support for the color-scheme CSS property by respectivley adding both baseScheme and scheme to CSSPluginOptions and ModeSelector.

Closes #549

How to Review

These new options shouldn't bring any breaking change as they are optional.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9b3aaa6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@terrazzo/plugin-css	Patch
@terrazzo/plugin-sass	Patch
@terrazzo/plugin-tailwind	Patch
@terrazzo/plugin-vanilla-extract	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[drwpow]

💯 This is fantastic, thank you!

If you could be so kind as to make a patch changeset, we can cut a release (even though this is a new feature, we’re using patch for backwards-compatible changes until we release a stable version). Be sure to add plugin-css, plugin-sass, plugin-tailwind, and plugin-vanilla-extract all to the release so they all get bumped together (since they all share output with the CSS plugin)

[nlemoine]

Sure!

[Sidnioulz]

Question: what happens if the baseScheme is set to e.g. only light and scheme dark is passed? Or in other words, if an invalid scheme is passed?

Would it be useful to write some config validation?

[nlemoine]

IMO, I would leave this to user responsibility (and the valid properties might change over time which brings maintenance burden).

I don't know the library well enough yet to catch the spirit, are config values validated elsewhere?

From a quick test in the tokens package, it doesn't look like there's any validation:

// in modeSelectors
{
  mode: 'light',
  selectors: ['hello world', '[data-color-mode="light"][data-color-mode="light"]'],
},

Outputs:

hello world,
[data-color-mode="light"][data-color-mode="light"] {
  --tz-border-1: 1px solid var(--tz-color-border-1);

That's totally ok and out of this library's scope to me.

But I'll let you evaluate if it's worth validating or not.

[Sidnioulz]

I don't have an opinion myself, and just figured I'd raise the question to see what you thought.

You have a solid reasoning informing your choice, I agree with you wrt the maintenance burden. I'm just not sure how hard it would be for users to debug a human error in setting the config without validation Vs having immediate error feedback.