pseudoclass

[JSerZANP]

<$.button $color="red">click me</$.button>

What is the proper way to support :hover and media query?

[JSerZANP]

const [ref, isHovered] = useHover()
<$.button $color={isHovered ? 'green' : 'red'} ref={ref}>click me</$.button>

This is good, but looks too intimidating

[JSerZANP]

const $color=$pseudo({
   default: 'red'
   hovered: 'green'
})
<$.button $color={$color}>click me</$.button>

This looks acceptable and straightforward. Question is if there are multiple props that varies on pseudo state, will it bloat?

const $color=$pseudo({
   default: 'red'
   hovered: 'green'
})

const $background = $pseudo({
  deafult: 'red',
  hovered: 'yellow'
})
<$.button $color={$color} $background={$background}>click me</$.button>

Is is possible that we spread it out?

const $spread=$.spread({
   $color: {
      default: 'red'
     hovered: 'green'
   },
  $background: {
    deafault: 'red',
    hovered: 'yellow'
   }
})

<$.button {...$spread}>click me</$.button>

[JSerZANP]

sth like this?

<$.button $color="red" $color.hovered="yellow">click me</$.button>