threepointone/glamor

How to convert comma into glamor ?

Opened this issue · 2 comments

Hello,

In css, I want this rules :

.btn:hover, .btn:active {
  color: red;
}

In glamor, I wrote this :

const btn = css`
  &:hover, &:active {
    color: red;
  }
`;

<a href="#" {...btn}>Link</a> // <-- this is JSX

The result, in the page, is

.btn:hover:active {
  color: red;
}

Did you already have the problem ? I know you can duplicate the rule, but I want to do it in 1 rule.
Any advices ?

Thx :)

I would "duplicate" the rule like you said. Something like :

const commonStyles = {
  color: 'red',
}

const btn = css({
  ':hover': commonStyles,
  ':active': commonStyles,
})

I think this is a bug in the css literal syntax bit, not glamor itself, should work with the object notation.