[JIT] Class based variant bug when chaining

What version of Tailwind CSS are you using?

v2.2.7

What build tool (or framework if it abstracts the build tool) are you using?

postcss v8.3.6

What version of Node.js are you using?

v14.15.5

What browser are you using?

chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/minimit/twbug-class-variant-chain

Describe your issue

When using custom variants with classes instead of pseudo selectors, and chaining multiple variants, the output is wrong.

This is the code of the addVariant.

    addVariant('class', ({ modifySelectors, separator }) => {
      modifySelectors(({ className }) => {
        return `.${e(`class${separator}${className}`)}.class`
      })
    })

This is the code of the apply or html class.

.test-class {
  @apply sm:class:hidden;
}

This is the output.

@media (min-width: 640px) {
    {
         display: none
    }
}

This is the desired output.

@media (min-width: 640px) {
    .test-class.class {
         display: none
    }
}

Seems also html class does the same.

[RobinMalfait]

Hey! Thank you for your bug report! Much appreciated! 🙏

I’ve been debugging on what’s going on here exactly. The issue is not that custom variants like that don’t work, the problem currently is what the result of the modified selector is.

I will make a PR to fix this, however there is an easier solution you can already apply for your use case:

 addVariant('class', ({ modifySelectors, separator }) => {
      modifySelectors(({ className }) => {
-       return `.${e(`class${separator}${className}`)}.class`
+       return `.class.${e(`class${separator}${className}`)}`
      })
    })

Essentially moving the .class in front. The reason why this works and the others don’t is because of an internal assumption where we update the last class of a selector, however, when you eventually have .hidden.class the last class is class, which should not be updated.

I’ll leave this open for now and will link my PR once it is ready, but in the meantime my small solution above should fix your issue for now.

[minimit]

Thanks works like a charm you delivered 👍