Build warning for `css-syntax-error` when using `divider` component from daisyui with tailwind v4.1

[velut]

What version of Tailwind CSS are you using?

v4.1.2

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

SvelteKit 2.20.3

What version of Node.js are you using?

v22.14.0

What version of Daisyui are you using?

v5.0.12

What browser are you using?

N/A

What operating system are you using?

Fedora 40

Reproduction URL

https://github.com/velut/tw-daisyui-divider-issue

Describe your issue

After upgrading to tailwind v4.1 a warning occurs during the build process if using the divider component from daisyui. On tailwind v4.0 this warning did not appear.

rendering chunks (4)...warnings when minifying css:
▲ [WARNING] Unexpected ")" [css-syntax-error]

    <stdin>:2:11914:
      2 │ ...olor-mix(in lab, red, red)){:is(){background-color:color-mix(in ...
        ╵                                    ^

After analyzing the compiled code the empty :is() appears here:

@supports (color: color-mix(in lab, red, red)) {
    :is() {
      background-color: color-mix(
        in oklab,
        var(--color-base-content) 10%,
        transparent
      );
    }
  }

This block of css is not generated when building with tailwind v4.0.

[philipp-spiess]

Hey! Thanks for the report. We did attribute this to an issue in lightningcss that we'll have to look more into next week. I also noticed that some of the color-mix(…) polyfills created in your example looked a bit odd which we'll also get resolved (see #17562).

[philipp-spiess]

@velut Good news! This issue was fixed in the latest release of lightningcss. We'll include an update in our next patch release. Thanks again for the bug report.

[velut]

@philipp-spiess Thank you!