Prefix option does not work with custom properties

[bakura10]

What version of Tailwind CSS are you using?

v3.0.23

Hi !

I am trying to use the prefix option, but I have found a problem that prevents it to work for more complex patterns. For instance, here is a simple code without any prefix:

.button {
  @apply text-[color:rgb(var(--button-background,var(--primary-button-background)))];
}

This properly generates the following markup:

.button {
  color: rgb(var(--button-background,var(--primary-button-background)));
}

When using a prefix (in my example "tw-"), if I change the apply:

.button {
    @apply tw-text-[color:rgb(var(--button-background,var(--primary-button-background)))];
  }

Then the following incorrect CSS is generated (note the lack of selector):

 {
  color: rgb(var(--button-background,var(--primary-button-background)));
}

[bakura10]

To complement this issue, here are a few other use cases where CSS generation fails with prefix:

.accordion-content {
    @apply tw-ease-[cubic-bezier(0.77,0,0.175,1)];
  }

Generates this incorrect markup:

 {
  transition-timing-function: cubic-bezier(0.77,0,0.175,1);
}

While the same without the prefix configured generate the correct markup.

[bakura10]

Hi,

Here are a few other cases where Tailwind generate incorrect CSS with prefix:

.foo {
  @apply tw-rounded-[min(4px,var(--input-border-radius))];
}

It generates the following incorrect code (notice the lack of selector):

{
  border-radius: min(4px,var(--input-border-radius));
}