saadeghi / daisyui

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

Button Ghost active and hover state is not working properly with Windi CSS #461

Closed vineryap closed 2 years ago

vineryap commented 2 years ago

Hi, I'm using the latest version of Windi CSS and daisyUI.

windi.config.ts config

import { defineConfig, transform } from 'windicss/helpers';
import daisyUiColors from 'daisyui/colors/windi';

export default defineConfig({
    extract: {
        include: ['./src/**/*.{html,js,svelte,ts}']
    },
    plugins: [transform('daisyui')],
    theme: {
        extend: {
            colors: daisyUiColors
        }
    }
});

button-ghost

saadeghi commented 2 years ago

I can't do anything about it. Windi CSS is generating invalid style by skipping a few lines.

Source style that daisyUI is providing

".btn-ghost": {
  "borderWidth": "1px",
  "borderColor": "transparent",
  "backgroundColor": "initial",
  "color": "currentColor"
},
".btn-ghost.btn-active,.btn-ghost:hover": {
  "-TwBorderOpacity": "0",
  "-TwBgOpacity": ["1", "0.2"],
  "backgroundColor": "hsl(var(--bc) / var(--tw-bg-opacity))"
},
".btn-ghost:focus-visible": {
  "outline": "2px 0 0 2px solid currentColor"
},

Expected CSS (the output that Tailwind CSS generates)

.btn-ghost {
   border-width: 1px;
   border-color: transparent;
   background-color: initial;
   color: currentColor;
}

.btn-ghost.btn-active,.btn-ghost:hover {
   --tw-border-opacity: 0;
   --tw-bg-opacity: 0.2;
   background-color: hsl(var(--bc) / var(--tw-bg-opacity));
}

.btn-ghost:focus-visible {
   outline: 2px 0 0 2px solid currentColor;
}

The output that Windi CSS generates:

.btn-ghost {
  border-width: 1px;
  border-color: transparent;
  background-color: initial;
  color: currentColor;
}
.btn-ghost:focus-visible {
  outline: 2px 0 0 2px solid currentColor;
}

Please open an issue on Windi CSS repo.