Combined selectors?

[iest]

Lets say I have the following css:

.f1 { font-size: 1rem };
.red { background: red };
.f1.red { font-size: 2rem};

and the following html:

<div class="f1 red">
  I'm red and 2em!
</div>

How do I replicate this in glamor?

[threepointone]

the easy way is to use regular selectors -

let rule = style({ 
  '&.f1' : { fontSize: '1rem' },
  '&.red' : { background: 'red' },
  '&.f1.red' : { fontSize: '2rem' }
 })

<div class={`${rule} f1 red`}></div>

but maybe this isn't satisfactory in terms of isolation, etc. A look at the code seems like it's tachyon type code? In which case maybe you could leverage js -

let f1 = style(...)
let red = style(...)
let rule = merge(f1, props.red ? merge(red, { fontSize: '2rem' }) : {})
<div className={rule}>
</div>

Another way would be

let f1 = style(...)
let red = style(...)
let f1red = style({
  `&.${f1}.${red}`: { fontSize: '2rem' }
})

<div className={`${f1red} ${f1} ${red}`}> ... </div>

each of these has tradeoffs,as you can imagine (incl the pure css one). open to other ideas!

[iest]

Thanks! I'm happy to open a PR to add this to the docs - where's the best place to put it?

[threepointone]

Neat, thanks! Howto.md would be nice?