Likely bug regarding color-mix() with multiple pseudo elements in a single rule - since tailwindcss-postcss@4.1.2

[beatonma]

Note

edit: I believe this issue actually originates in Lightning CSS (parcel-bundler/lightningcss#975) and the Tailwind side of things is okay.

Sample app using Next.js.

Since @tailwindcss/postcss@4.1.2 (most likely commit 60b0da9), the CSS function color-mix resolves unexpectedly when:

• multiple pseudo-element selectors are defined in a single rule: &::before, &::after {}, or
• a single pseudo element on multiple pseudo classes: &:hover::before, &:focus-visible::before {}

For example (excerpt from src/app/globals.css):

@utility -bg-color {
  background-color: color-mix(in srgb, var(--hover, var(--fg)) 50%, var(--bg));
}

.together {
  &:focus-visible::before,
  &:hover::before {
    /* Unexpectedly resolves to: var(--hover,var(--fg)) */
    @apply -bg-color;
  }
}

.separate {
  /* The same thing with separate rules, both resolve correctly: color-mix(in srgb,var(--hover,var(--fg))50%,var(--bg)) */
  &:focus-visible::before {
    @apply -bg-color;
  }
  &:hover::before {
    @apply -bg-color;
  }
}

Other notes:

• Multiple pseudo classes on their own work fine: &:focus-visible, &:hover {}
• It only affects @tailwindcss/postcss@4.1.2 and later - doing the same thing on 4.1.1 works as expected.
• This only seems to happen during production builds: npm run build && npm run start - at least on Next.js.
• The output of the Tailwind CLI works fine: npx @tailwindcss/cli -i ./src/app/globals.css -o ./output.css - it only seems to happen when postcss is applied.

---

Is there anything else I should try before reporting this as a bug?

[wongjn]

The I think the unexpected behavior is indeed with pseudo-elements, where browsers don't support nesting inside of them (see #16582 (comment) for a different manifestation of a similar problem)

The color-mix() usage means @supports rule is generated inside:

.together {
  &:focus-visible::before, &:hover::before {
    background-color: var(--hover, var(--fg));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--hover, var(--fg)) 50%, var(--bg));
    }
  }
}

I think Tailwind might need to fix this, since we as authors cannot manipulate where the @supports goes. It would need to be like:

.together {
  &:focus-visible::before, &:hover::before {
    background-color: var(--hover, var(--fg));
  }
  @supports (color: color-mix(in lab, red, red)) {
    &:focus-visible::before, &:hover::before {
      background-color: color-mix(in srgb, var(--hover, var(--fg)) 50%, var(--bg));
    }
  }
}

Or

.together {
  &:focus-visible, &:hover {
    &::before {
      background-color: var(--hover, var(--fg));
    }
    @supports (color: color-mix(in lab, red, red)) {
      &::before {
        background-color: color-mix(in srgb, var(--hover, var(--fg)) 50%, var(--bg));
      }
    }
  }
}

[beatonma]

Thanks for your response!

I don't think that's quite the same issue though - I've been digging around to see if I could fix it myself and found that all of the output is fine until it gets sent to Lightning CSS (which happens twice in a row).

So this input:

.target {
  &::before, &::after {
    color: color-mix(in srgb, red, orange);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in lch, var(--color-red-500), var(--color-orange-500));
    }
  }
}

becomes:

.target:before, .target:after {
  color: #fc4d1b;
}

@supports (color: color-mix(in lab, red, red)) {
  :is(.target:before, .target:after) {
    color: color-mix(in lch, var(--color-red-500), var(--color-orange-500));
  }
}

...which is invalid CSS (:is() must not contain a pseudo-element). The second call then turns it into:

.target:before, .target:after {
  color: #fc4d1b;
}

@supports (color: color-mix(in lab, red, red)) {
  :is() {
    color: color-mix(in lch, var(--color-red-500), var(--color-orange-500));
  }
}

---

I went over to their github and immediately found that @echocrow reported it there 2 days ago. Once that is fixed I believe the Tailwind side of things will be fine. In the meantime it's not a big issue to separate the rule declarations.