Using a prefix with @apply breaks arbitrary values in numerous ways

[trappar]

Reporting this issue on behalf of myself and @isaacchong1

What version of Tailwind CSS are you using?

3.0.24

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

This bug occurs in the Tailwind CLI, via postcss, on Tailwind Play. I believe this bug happens everywhere.

What version of Node.js are you using?

16.14.0

What browser are you using?

Issue is browser independent, but I'm using: Brave Version 1.36.116 Chromium: 99.0.4844.74 (Official Build) (64-bit)

What operating system are you using?

Pop_OS!

Reproduction URL

https://play.tailwindcss.com/WQ2sVWOAqj?file=css

Describe your issue

As the title says, using a prefix seems to break css generation in many ways. I've found many different cases where this breaks. I documented some of them in the reproduction URL above, but they all seem to be caused by the combination of a prefix, @apply, and using arbitrary values. See examples below:

Note: For all of these examples, I'm using the prefix "@", but I've tried other prefixes (like "a") and it breaks in the exact same way.

Transition with a single value works:

.works {
  @apply @transition-[top];
}

Result:

.works {
  transition-property: top;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

Transition with multiple values breaks:

.broken {
  @apply @transition-[top,left];
}

Result: (note that there's no class name anymore)

 {
  transition-property: top,left;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

Multiple box shadows:

.broken {
  @apply @shadow-[3px_3px_red,-3px_-3px_olive]
}

Result: ERROR: Cannot read properties of undefined (reading 'filter')

[bakura10]

I’ve reported it there: #7874

the insiders version has fixed the issue for me but there may be more issues. I’ve found usage of prefix to break a lot of use cases indeed :)

[thecrypticace]

Thanks for the report! Yep, this was indeed fixed in our insiders build in #8125.