`b.var()` to generate CSS variable references

[barneycarroll]

…the same way BSS currently does for class names. That way we can avoid accidental cascades!

[porsager]

More like $.keyframes perhaps? Could you make some pseudo code of how you imagined usage?

[barneycarroll]

Yes, much the same. Remember we were talking about the problem of accidental downstream collisions?

Straw man:

export const color = b.var('buttonColour')

export const Button = b`
  border-radius: 3px;
  color        : var(${ color });
`

//

import { Button, color } from './Button'

export const Modal = {
  view: ({attrs, children}) => 
    m(Etc, 
      children,
      
      m('button' + Button, {
        [color] : 'green',
        onclick : attrs.update(true),
      }),
      
      m('button' + Button, {
        [color] : 'red',
        onclick : attrs.update(false),
      }),
    ),
}

[porsager]

Yeah exactly. That's a really good way to solve it!

In your example the [color] would need to be under style right?