Responsive Custom Variants

[summer-jordan]

I am trying to use a custom variant in conjunction with a responsive variant. The custom variant works fine but when coupled with a responsive variant, it does not.

The custom variant code:

export const childCombinator = createPlugin(({ addVariant }) => {
  addVariant('child', ({ modifySelectors }) => {
    return modifySelectors(({ className }) => {
      console.log(className)
      return `.parent > .${className}`
    })
  })
})

When used in the following way, hidden is applied to the child element but block is not applied above the md breakpoint.

<div class="parent">
  <div class="child:hidden md:child:block"></div>
</div>