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
219 stars 9 forks source link

Support dark and light adaptive props #14

Closed argyleink closed 2 years ago

argyleink commented 2 years ago

fixes #11

todo:

PapiPeppers commented 1 year ago

Is it possible to place the dark mode props under a specific class or attribute selector, instead of placing them into a media query? I have a theme toggle that updates a root data-attribute and class upon a toggle change event so placing the css variables into a prefers-color-scheme media query won't work.

I'm wondering if an option could be added to the plugin to specify where the props get placed (default: media query, custom: [data-attr, #id, .class, etc]), similar to the option to insert the props into a specified layer. The current -@media:dark syntax could be maintained if the plugin created the specified selectors instead of outputting props under the root selector in a media query.

argyleink commented 1 year ago

this is a very meaningful feature request! logged the feature request here https://github.com/GoogleChromeLabs/postcss-jit-props/issues/44