Using multiple values in :where/:is/:not produces invalid CSS with @apply

[silvenon]

What version of Tailwind CSS are you using?

v3.0.0-alpha.2

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

Just Tailwind CLI.

What version of Node.js are you using?

v16.13.0

What browser are you using?

It isn't relevant to this bug.

What operating system are you using?

macOS

Reproduction URL

https://github.com/silvenon/repro/tree/tailwind-variant-comma

Describe your issue

The following bug only happens when using @apply.

I'm trying to create a plugin which adds a variant that uses more than one value inside :where (can also be :is or :not, doesn't matter), e.g. my-variant:where(.one, .two, .three). Using a single selector works fine, but using multiple values generates invalid CSS. My plugin contains the following:

addVariant('my-variant', '&:where(.one, .two, .three)')

My input.css looks like this:

@layer components {
  .test {
    @apply my-variant:text-red-500;
  }
}

After running npx tailwindcss --input input.css --output output.css I get the following invalid CSS:

.test:where(.one {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity))
}

[RobinMalfait]

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

I will look into this and provide a fix!

[silvenon]

Wow, thanks! ❤️