glamor icon indicating copy to clipboard operation
glamor copied to clipboard

How to convert comma into glamor ?

Open azopyros opened this issue 8 years ago • 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 :)

azopyros avatar Jan 19 '17 13:01 azopyros

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

const commonStyles = {
  color: 'red',
}

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

antoinerey avatar Jan 19 '17 16:01 antoinerey

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

threepointone avatar Feb 22 '17 07:02 threepointone