Unable to nest styles in psuedo elements

[richcsmith]

In my app, I'd like to use pseudo-elements in more complex ways, but it seems that I'm not able to nest styles within pseudo selectors, such as hover:

merge(
  ...,

  after({
    content: '""',
    display: 'block',
    position: 'absolute',
    opacity: 0,
    ...
  }),

  hover(
    {
      fontWeight: 300,
    },

    after({
      opacity: 1,
      ...
    })
  )
),

I have also tried the following, but to no avail:

hover(
  {
    fontWeight: 300,
  },

  $('.Element', after({
    opacity: 1,
    ...
  }))
),

Am I approaching this in the wrong way? If not, do you suggest a workaround?

[threepointone]

hover doesn't accept multiple arguments. gimme 20 mins or so and I'll publish a version where this should work.

[richcsmith]

That would be awesome, thank you!

[threepointone]

so it's a little inefficient for me to accept multipel arguments diferctly, however, arrays should be fine. just pushed an update with the same. so this should work -

merge(
  ...,

  after({
    content: '""',
    display: 'block',
    position: 'absolute',
    opacity: 0,
    ...
  }),

  hover([ // note the array braces
    {
      fontWeight: 300,
    },

    after({
      opacity: 1,
      ...
    })
  ])
),

[richcsmith]

Ah, this works too--thank you! I'm actually using glamor via next.js, so I'll probably need to fork that so I can manually bump the glamor version it's using. I'll need to look into that.

[threepointone]

alright, I'll close this for now, feel free to reopen if you need to.