@apply raise an error for some nested rules composed by breakpoints and variants #4561
Description
What version of Tailwind CSS are you using?
2.1.2
What build tool (or framework if it abstracts the build tool) are you using?
5.37.1
What version of Node.js are you using?
v14.0.6
What browser are you using?
chrome
What operating system are you using?
LinuxOS 5.8.0-53-generic #60~20.04.1-Ubuntu
Reproduction repository
github.com/denik1981/FEM //special "tailwind" branch created for this
Describe your issue
For some nested utility classes the compilation fails.
Not sure how big is the list of this selectors but for the ones I found this issue the pattern was a nested class compoused of a breakpoint and a variant. For i.e.
xl:hover:transition-all
xl:active:transition-all
xl:hover:font-bold
All of them compile well when I place them inside the markup (HTML) but failed as soon as I extracted them with @apply.
In the repo I have created a special branch called 'tailwind'. Please note this is a npm monorepo and several proyects are located inside it. To reproduce the issue navigate to "./challenges/huddlepage" and run the necessary scripts for installing and building (npm install && npm run build:dev)
HEAD~1 commit shows the version that compiles well with this utilities placed in the markup.
I have also extracted the JSON stats file for the bundler that execute the postcss compiler. You will see two files: a verbosed stats JSON file and an "only-errors "JSON stats file. Be ware both belong to the output for the same compilation.
The repo
github.com/denik1981/FEM
The CSS file (where utilities are extracted)
styles.css
The conflictive class (where buggy utilities where extracted)
hero__button
The conflictive utilities
xl:hover:transition-all, xl:active:transition-all, xl:hover:font-bold;
The compilation output
compilation-stats-errors.json
compilation-stats-verbose.json