bug: daisyui doesn't compile with nextjs 15

[luluhoc]

What version of daisyUI are you using?

v4.12.22

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

none

Describe your issue

Parsing css source code failed
  1298 |   }
  1299 |
> 1300 |    {
       |     ^
  1301 |     grid-auto-flow: row dense !important;
  1302 |   }
  1303 |

Invalid empty selector at [project]/src/styles/globals.css:1299:4

[github-actions]

Thank you @luluhoc 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]

Reproduction URL please

[bathtaters]

I've noticed that Turbopack, which Next.JS uses in v15 over Webpack to compile the 'dev' server (i.e. npm run dev), will not compile if it detects any invalid CSS.

This helped me locate and fix some probably bad practices I was using (In my case combining tailwind and daisyUI classes that weren't intended to be combined). See Next.JS Turbopack for more info.

But to quickly fix the issue, I was able to just remove --turbopack from my package.json (Under scripts.dev) to use Webpack instead.

[saadeghi]

What was the problematic style?

[bathtaters]

I was using file:btn (Tailwind's selector for the file input button), since I started the project before the file-input class was created (I just replaced it with the file-input class and everything works fine now). This was the error reported by Next.JS:

Parsing css source code failed
  20554 | }
  20555 |
> 20556 | .file\:btn[disabled]::file-selector-button,.file\:btn::file-selector-button:disabled {
        |                                                                              ^
  20557 |   pointer-events: none;
  20558 | }
  20559 |

Invalid pseudo class after pseudo element, only user action pseudo classes (e.g. :hover, :active) are allowed at [project]/src/styles/globals.css:20555:77

For reference, here is the repo (Line 12 was where I used it): bathtaters/mtg-drafter

[saadeghi]

.file:btn[disabled]::file-selector-button,.file:btn::file-selector-button:disabled

😅🙈

I guess we can close this issue then.

Good news is, starting with daisyUI 5 (coming soon) it will be possible to include or exclude every part of library and it gives us more control. It would be also beneficial for projects with existing styles to incrementally use daisyUI without getting conflicts from existing styles.