"@apply prose" breaks all further instances of @apply

[Joobs]

What version of @tailwindcss/typography are you using?

3.0.0-alpha.2

What version of Node.js are you using?

v14

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/cM8QtjobVQ

Describe your issue

I was experimenting with the new Tailwind JIT CDN and I noticed an issue with the Typography plugin. I've not tried it on a production setup.

If i use @apply prose the compiler seems to ignore any future @apply rules (either on the same line, or further down the CSS).
The bug is present in Tailwind V3 Alpha2, but compiles as expected if i switch to V2.2.19. Switch between the two versions to see the differences. In my example it ignores the prose-2xl and @apply text-red-500 rules after prose is applied.

Example: (switch between Tailwind versions)
https://play.tailwindcss.com/ogV2iFjxm3

Tailwind 3 Alpha:

Tailwind 2:

[LiamThursfield]

Unsure if this is related but I have this:

.mce-content-body {
    @apply prose;
}

Looking through the generated CSS I have found the broken bit off CSS is:

.mce-content-body :where(ul ul{
    margin-top: 0.75em;
    margin-bottom: 0.75em;

}

So any CSS generated after this doesn't work/is ignored.

I assume this should be:

.mce-content-body :where(ul ul){
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

---

Update:

The code is above my head but it looks to be the fact that in styles.js the selector contains commas i.e.

'ul ul, ul ol, ol ul, ol ol': {
  marginTop: em(12, 16),
  marginBottom: em(12, 16),
},

Changing to this fixes the issue:

'ul ul': {
    marginTop: em(12, 16),
    marginBottom: em(12, 16),
},
'ul ol': {
    marginTop: em(12, 16),
    marginBottom: em(12, 16),
},
'ol ul': {
    marginTop: em(12, 16),
    marginBottom: em(12, 16),
},
'ol ol': {
    marginTop: em(12, 16),
    marginBottom: em(12, 16),
},

So I imagine the issue is upstream somewhere when processing selectors with commas.

Hope this helps someone with a better understanding of how it all works!

[thecrypticace]

Thanks for the report. I just checked and this appears to work fine in the latest version of Tailwind CSS v3!