search

GoogleChromeLabs / postcss-jit-props

A CSS custom property helper based on PostCSS. Supply a pool of variables and this plugin will add them to the stylesheet as they are used.
https://stackblitz.com/edit/jit-open-props?file=postcss.config.js
Apache License 2.0
210 stars 9 forks source link

Should work with a client side switch #44

Closed argyleink closed 8 months ago

argyleink commented 8 months ago

see https://github.com/GoogleChromeLabs/postcss-jit-props/pull/14#issuecomment-1760504201

either this plugin should automatically place the props under a class/data attribute/etc with a generic set of selectors OR it should allow specifying what selector to additionally put the props under.

PapiPeppers commented 8 months ago

Could have 2 new config options: rootSelector, darkSelector. rootSelector defaults to :root, and darkSelector defaults to :root nested under @media (prefers-color-scheme: dark) same as the plugin does now. Or the options take a user provided css selector string such as ":root, .light, [data-color-mode=light]" for rootSelector or ".dark, [data-color-mode=dark]" for darkSelector.

argyleink commented 8 months ago

the PR adds a new config entry for a custom dark selector. you could already pass a custom selector, but it applies to both light and dark preference. this entry allows you to specify a light mode entry and a dark mode entry https://github.com/GoogleChromeLabs/postcss-jit-props/pull/45/files#diff-59e25b254be93038f106111be580b6fb54c6963b6c4e7ef744e58fb8f2b3e3a2R416

argyleink commented 8 months ago

fixed in v1.0.14 👍🏻