Discussion on: Reactive CSS Explained

[Adam Crockett 🌀]

Version 1.1.0 is being worked on and it's going to be better because:

• no async or promise needed
• no custom event
• CSS custom property fallback will be supported

Polymorphism means that themeTextColor can be called(), address.someMethod(), oh and its a string too:

Preview:

import rCSSProps from "./cssProps";

const { themeTextColor } = rCSSProps();

// watch for changes
themeTextColor.subscribe((change) => {
  console.log("Im watching for theme text changes", change);
});

// set the variable and inject into the dom
themeTextColor("#000");

setTimeout(() => {
  // change the theme text color after 3 seconds to simulate dark mode toggled
  themeTextColor("#fff");
}, 3000);

// just stringify it... more magic!
console.log(`
  background: ${themeTextColor};
`);

I have exhausted every magic trick I know in JavaScript to make this easy to use I will be publishing this thing once I have added a fallback. The code above is in a forked sandbox, I will do another writeup.