saadeghi / daisyui

๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ โ€ƒThe most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.13k stars 1.3k forks source link

bug: "Theme Controller using a radio button" renders differently in NextJs when running it with turbo pack #3229

Closed samislam closed 1 month ago

samislam commented 1 month ago

What version of daisyUI are you using?

v4.12.13

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://filebin.net/bu5kd4ggjcwlvbnj

Describe your issue

I wrote a very simple page that renders the component shown in this example in the docs. The component renders differently when running NextJs with turbo-pack and when running NextJs normally.

Here's the code:

export default function Home() {
  return (
    <div className="flex w-full h-screen flex-col bg-red-400">
      <div className="join join-horizontal m-auto">
        <input
          type="radio"
          name="theme-buttons"
          className="btn theme-controller join-item"
          aria-label="Default"
          value="default"
        />
        <input
          type="radio"
          name="theme-buttons"
          className="btn theme-controller join-item"
          aria-label="Retro"
          value="retro"
        />
        <input
          type="radio"
          name="theme-buttons"
          className="btn theme-controller join-item"
          aria-label="Cyberpunk"
          value="cyberpunk"
        />
        <input
          type="radio"
          name="theme-buttons"
          className="btn theme-controller join-item"
          aria-label="Valentine"
          value="valentine"
        />
        <input
          type="radio"
          name="theme-buttons"
          className="btn theme-controller join-item"
          aria-label="Aqua"
          value="aqua"
        />
      </div>
    </div>
  );
}

Here's how it renders:

First, here's how it looks like when running NextJs dev server normally:

Description Description

On the other hand, here is how it looks like when running NextJs with turbopack enabled:

Description Description
github-actions[bot] commented 1 month ago

Thank you @samislam 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.

samislam commented 1 month ago

By the way, the rest of my real application works perfectly, just the issue is in this theme toggler, here's my application that I am currently working on: image

This UI is completely written with Daisyui classes, they work. just the theme toggler.

saadeghi commented 1 month ago

The issue is not from daisyUI.
daisyUI provides styles to Tailwind CSS, then your build tool/bundler runs Tailwind CSS and creates your CSS file.
I don't have any control over the build tool or bundler.
Please report the issue here: https://github.com/vercel/next.js/issues

Also, I don't think Turbopack is ready for production. It's still in beta so bugs are expected.