Should light-dark plugin assume light by default, or perhaps via an option?

[ajbrun]

Bug description

When using the light-dark function without the postcss plugin applied and using color-scheme: normal (or unset as this is the default), the light color is used:
https://jsfiddle.net/b0pd1yLc/2/

However, when applying the plugin output, the dark color is used:
https://jsfiddle.net/b0pd1yLc/3/

I'm aware this will be because the plugin will be wanting an explicit instruction, I think it's an error for the css result to output the dark option. I think this should instead be light by default or (perhaps preferrably) have the default passed in by an option (with light being the default).

The normal value appears to find its value from either a page's meta tag (which this plugin won't have access to) or the browser's default color scheme (I'm not aware of any browser that has a "dark" default color-scheme). The possible requirement of the meta tag could be a good reason for the optional input parameter here.

Source CSS

:root {
  color-scheme: normal;
  --color-on-light: #000000;
  --color-on-dark: #ffffff;
  --color: light-dark(var(--color-on-light), var(--color-on-dark));
}

body {
  color: var(--color);
  background: red;
}

Expected CSS

:root {
  --csstools-color-scheme--dark:  ;
  color-scheme: normal;
  --color-on-light: #000000;
  --color-on-dark: #ffffff;
  --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) var(--color-on-light);
  --color: var(--csstools-light-dark-toggle--0, var(--color-on-dark));
}

@supports (color: light-dark(red, red)) {
:root {
  --color: light-dark(var(--color-on-light), var(--color-on-dark));
}
}

:root * {
  --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) var(--color-on-light);
  --color: var(--csstools-light-dark-toggle--0, var(--color-on-dark));
}

body {
  color: var(--color);
  background: red;
}

Actual CSS

:root {
  color-scheme: normal;
  --color-on-light: #000000;
  --color-on-dark: #ffffff;
  --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) var(--color-on-light);
  --color: var(--csstools-light-dark-toggle--0, var(--color-on-dark));
}

@supports (color: light-dark(red, red)) {
:root {
  --color: light-dark(var(--color-on-light), var(--color-on-dark));
}
}

:root * {
  --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) var(--color-on-light);
  --color: var(--csstools-light-dark-toggle--0, var(--color-on-dark));
}

body {
  color: var(--color);
  background: red;
}

Playgound example

https://preset-env.cssdb.org/playground/#JTdCJTIyc291cmNlJTIyJTNBJTIyJTNBcm9vdCUyMCU3QiU1Q24lMjAlMjBjb2xvci1zY2hlbWUlM0ElMjBub3JtYWwlM0IlNUNuJTIwJTIwLS1jb2xvci1vbi1saWdodCUzQSUyMCUyMzAwMDAwMCUzQiU1Q24lMjAlMjAtLWNvbG9yLW9uLWRhcmslM0ElMjAlMjNmZmZmZmYlM0IlNUNuJTIwJTIwLS1jb2xvciUzQSUyMGxpZ2h0LWRhcmsodmFyKC0tY29sb3Itb24tbGlnaHQpJTJDJTIwdmFyKC0tY29sb3Itb24tZGFyaykpJTNCJTVDbiU3RCU1Q24lNUNuYm9keSUyMCU3QiU1Q24lMjAlMjBjb2xvciUzQSUyMHZhcigtLWNvbG9yKSUzQiU1Q24lMjAlMjBiYWNrZ3JvdW5kJTNBJTIwcmVkJTNCJTVDbiU3RCU1Q24lMjIlMkMlMjJjb25maWclMjIlM0ElN0IlMjJicm93c2VycyUyMiUzQSU1QiUyMiUzRSUyMDAuMiUyNSUyMGFuZCUyMG5vdCUyMGRlYWQlMjIlNUQlMkMlMjJtaW5pbXVtVmVuZG9ySW1wbGVtZW50YXRpb25zJTIyJTNBMCUyQyUyMnN0YWdlJTIyJTNBMiUyQyUyMmxvZ2ljYWwlMjIlM0ElN0IlMjJpbmxpbmVEaXJlY3Rpb24lMjIlM0ElMjJsZWZ0LXRvLXJpZ2h0JTIyJTJDJTIyYmxvY2tEaXJlY3Rpb24lMjIlM0ElMjJ0b3AtdG8tYm90dG9tJTIyJTdEJTdEJTdE

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

None

Debug output

No response

Extra config

No response

What plugin are you experiencing this issue on?

PostCSS Light Dark Function

Plugin version

2.0.1

What OS are you experiencing this on?

Windows

Node Version

18.20.3

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR

[romainmenke]

Hi @ajbrun,

Thank you for reporting this!
I agree that it is a bug.

I've inverted the booleans so that the default is actually light and not dark when color-scheme is not set to either light, dark or light dark.

Please let me know if this resolves your issue.

[ajbrun]

Hi @ajbrun,

Thank you for reporting this! I agree that it is a bug.

I've inverted the booleans so that the default is actually light and not dark when color-scheme is not set to either light, dark or light dark.

Please let me know if this resolves your issue.

Nice one, that's a lot better thanks!

The only change I'd perhaps make is to allow the fallback value to not always be light. This is because normal can result in dark mode if a meta tag is used:
https://codesandbox.io/p/sandbox/fqtpsr

I'd therefore perhaps consider having a defaultColorScheme fallback option which would default to light, but could be set to dark, or any other valid color-scheme value (light, dark, normal, light dark, dark light, only light).

[romainmenke]

I can see the value of such a plugin option but I would rather not add it.
This would overcomplicate the code in this plugin and most users will never use this.
The goal of this specific plugin is to make it easier to use light-dark() today, even if some browser versions don't have support yet.

I think that it would be better handled by a custom plugin if you need configuration.