"observables" in csjs

[serapath]

I just saw #61 and I like that #15 might be supported.

Do I understand correctly, that #61 might add some kind of runtime css parsing?

I'm not sure if necessary, but I was thinking, maybe some kind of runtime css parsing could help to add some form of "observable" primitiv, so that a css property would be auto-updated, whenever the observable variable changes.

The idea would be, that - maybe similar to a minimal version of styletron , every part of the stylesheet that uses an "observable" is put into a <style> tag that is as minimal as possible and internally, csjs subscribes generated functions to changes of all "observables" to update those <style> tags.

example:

function o (value) { // or something else
  var subscribers = []
  return function variable (val) {
    if (typeof val === 'function') subscribers.push(val)
    else if (val === undefined) return value
    else (value = val, subscribers.forEach(fn => fn(value)))
  }
}

var color = 'red'
var color$ = o()

color$(function(x){ // observe the value
  console.log('color$ changed to', x)
})

color$('green') //set the value
color$() //get the value - e.g. can be used when initializing css

var css = csjs`
  .title {
    color: ${color};
    background-color: ${color$};
  }
`
color$('blue') // update the value