Not working with ViteJS and WindiCSS

[mq1]

Buttons always displayed as loading. Click animation not present.

Dropdowns display as btn loading too, and don't work when clicked.

Colors and themes work correctly.

No errors in js console.

// windi.config.ts
import { defineConfig } from 'vite-plugin-windicss'
import { transform } from 'windicss/helpers'

export default defineConfig({
  darkMode: 'media',
  theme: {
    extend: {
      colors: require('daisyui/colors/windi'),
    },
  },
  plugins: [
    transform('daisyui'),
  ],
})

Am I missing something?

[saadeghi]

@mq1 That's weird. Buttons only should show the loading spinner if they have a loading class 🤔
Can you make a small example repo so I can reproduce this problem?

[mq1]

@mq1 That's weird. Buttons only should show the loading spinner if they have a loading class 🤔 Can you make a small example repo so I can reproduce this problem?

https://github.com/mq1/daisy-issue

[saadeghi]

@mq1 Thanks!
Well... it looks like WindiCSS is not creating the correct style and I'm afraid I can't fix this on my end. This is the source style of .btn.loading: https://github.com/saadeghi/daisyui/blob/master/src/components/unstyled/button.css#L23

.btn {
  &.loading {
    &:before {
      /* loading style */
    }
  }
}

and it should result this: (which works fine with Tailwind)

.btn.loading:before{
  /* loading style */
}

But WindiCSS is creating this style instead (which is wrong):

.btn:before {
  /* loading style */
}

Can you please keep that test repo online? I'm creating an issue on WindiCSS and I'll mention this.

[mq1]

Thanks!

[mq1]

I think we can close this issue DaisyUI works correctly on https://github.com/windicss/windicss/releases/tag/v3.1.2