WindiCSS problem with CSS variables, double dash prefix is only single dash in the generated javascript files

[gunters63]

Hi there.

I am using DaisyUI together with Vite and WindiCSS (vite-plugin-windicss) and it is almost working.

There is one problem with CSS variables, though (Styled components and themes).
DaisyUI uses prejss-cli to convert the css into JS objects.
Strangely, during this conversion, CSS vars get mangled from:

--tw-bg-opacity

To something like this:

-TwBgOpacity

The conversion from kebab to Pascal case would be ok, windicss can handle this, the problem is the deleted dash at the start.
It only happens for CSS variables starting with double dash.

Something in the prejss-cli conversion is going wrong.

If I manually replace all -Tw with --Tw in daisyui/dist/styled.js, the styled components seem to work.

[saadeghi]

Hi,
I don't think this problem is because how prejss converts the variables because in a Tailwind project, Tailwind uses the same JS object and everything works fine. However Windi seems to read it differently.

As mentioned in this issue @marshallswain is working on the plugin (Thanks to him) and it might get fixed soon.

[gunters63]

Ok, I will have a look on how tailwind processes the JS objects. Maybe the WindiCSS team can be convinced to process these the same way. Then an extra plugin would not be strictly necessary I think.

That said, I still think prejss-cli does the wrong thing here, maybe I will look into that too, just curious :)

[gunters63]

I found the reason why Tailwind can handle the '-TwBgOpacity syntax':

dashify

May the WindiCSS team can adapt their parsing to match this, I will ask them :)

[gunters63]

I created an issue for WindiCSS: Component generation not 100% compatible to TailwindUI with leading dashes

[gunters63]

I created another issue for WindiCSS because themes break because the media style "@media (prefers-color-scheme:dark)" is moved to the end: Component generation moves media CSS styles to the end

[marshallswain]

@gunters63 I'm glad you confirmed the issue. I suspected it was a WindoCSS bug, but it's much better that you've identified the actual cause of the bug in windi.

[saadeghi]

This issue seems to be fixed (windicss/windicss#218)
@gunters63 Can you please update WindiCSS to latest version (2.5.10) and confirm if it works now?

[gunters63]

@saadeghi: Yes, can confirm it works now. Now there is only a little problem with theming left which I could work around (copying the CSS, removing the media prefers-dark style and importing it directly with themes: false in daisyui config).

[gunters63]

Closing issue as WindiCSS is fixed now