Self reference

[buzinas]

I'm wondering how would I reference the component itself, eg for styling identical siblings:

const Component = styled(RadioGroupPrimitive.Item, {
  bc: '$blackA9',

  [`&:hover, &:hover + ${Component}`]: {
    bc: '$warning10',
    transform: 'scale(1.2)',
  },
})
// throws 'Component' was used before it was defined

[peduarte]

The & basically references itself:

const Component = styled(RadioGroupPrimitive.Item, {
  bc: '$blackA9',

  '&:hover, &:hover + &': {
    bc: '$warning10',
    transform: 'scale(1.2)',
  },
})