bug: vite warnings when minifying css

[sasokovacic]

What version of daisyUI are you using?

5.0.0-beta.6

Which browsers are you seeing the problem on?

No response

Reproduction URL

https://stackblitz.com/

Describe your issue

npm run build

vite v6.0.11 building for production... transforming (519) node_modules/.pnpm/@[email protected]/node_modules/@popperjs/core/lib/utils/debounce.js/*! 🌼 daisyUI 5.0.0-beta.6 */ ✓ 3857 modules transformed. rendering chunks (22)...warnings when minifying css: ▲ [WARNING] Unexpected ")" [css-syntax-error] <stdin>:22238:63803: 22238 │ ...ight:.125rem}@media print{:is(){border:.5px solid}}.divider:... ╵ ^

I get the same error when I build the app using npm

My stack:

Ubuntu 22.04

nodejs: v22.13.1
npm: 10.9.2

package.json

"vue": "^3.5.13",
"@tailwindcss/postcss": "^4.0.3",
"@vitejs/plugin-vue": "^5.2.1",
"daisyui": "5.0.0-beta.6",
"postcss": "^8.5.1",
"tailwindcss": "^4.0.3",
"vite": "^6.0.11"

postcss.config.js

export default {
plugins: {
"@tailwindcss/postcss": {}
},
};

Btw why do you require URL for issues? I can't use stackblitz because they have nodejs 18 but I use nodejs 22. I used stackblitz.com otherwise I would not be able to report the bug.

[github-actions]

Thank you @sasokovacic for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

Can you share a minimal reproduction link please?

[codesue]

I'm seeing the same warning when trying to upgrade from daisyUI v4 to v5 beta and using the @tailwindcss/vite plugin. The warning disappears when I remove divider classes. At first I thought it was most likely caused by whatever change was introduced to make divider more print-friendly, but I'm also using radio and checkbox components, which don't produce similar warnings.

I don't have a minimal repro yet either. My builds have been failing due to a postcss "Unknown word" error, and I'm trying to track down whichever spelling error or a deprecated class may be causing it. 😅

[saadeghi]

It's not easy to guess what's the issue without a reproduction link. I mean, I need to see the issue so I can debug it…

[codesue]

Here's a reproduction link: https://github.com/codesue/debug-postcss-daisyui5-divider

I created a minimal SvelteKit app with npx sv create and set up Tailwind and daisyUI. Then, I added the component <div class="divider"></div> to the homepage.

Running npm run dev works as expected, but running npm run build produces the warning.

[saadeghi]

Thanks for the link 👍

The issue is either from Tailwind or Vite.
Expected output style is:

@media print{&{border:.5px solid}}

(which is correct in Tailwind Play)

But in Vite generates:

@media print{:is(){border:.5px solid}}

It adds an empty :is() which is invalid.

I will open an issue in Tailwind or Vite repo after I find out which one is responsible.

Meanwhile I can change the style in a way to avoid this issue. It will be fixed in 5.0.0-beta.7 tomorrow.

[codesue]

Thank you for the quick fix and for looking into this!

[sasokovacic]

great thanks...

[saadeghi]

fixed in 5.0.0-beta.7

[Damato]

I linked this issue to an issue logged on the Tailwind side, as it seems to not be DaisyUI issue but that it rather came in with Tailwind 4. I could not find a ticket similar to this, on that side - so I created one as it seems to be a strange behaviour they missed.

tailwindlabs/tailwindcss#16582

Thanks @sasokovacic and @saadeghi, the details helped me to understand what is going on and hopefully get it solved.