Component generation not 100% compatible to TailwindCSS with leading dashes

There is an issue in DaisyUi where CSS variables are not generated correctly when using DaisyUI as a WindiCSS plugin (it works fine in TailwindUI).

The reason is quite subtle. In WindiCSS the CSS name of the passed Javascripts are run through a function named camelToDash

In Tailwind the same thing happens deep in a third party module postcss-js

The latter converts property names with one starting dash to CSS names with two dashes. The former leaves a single dash in place.

For DaisyUi this means that -TwBgOpacity in the Javascript object passed to addComponents gets converted to:

--tw-bg-opacity by Tailwind and -tw-bg-opacity by WindiCSS

I think it would be helpful to make WindiCSS more TailwindUI compatible by using the same dashing conversion.

[gunters63]

Can confirm it works now 😃

[gunters63]

Sure, here is a test case:

input:

  '.alert': {
    '-TwBgOpacity': '1',
  },

expected CSS output:

.alert {
	--tw-bg-opacity: 1;
}

current output:

.alert {
	-tw-bg-opacity: 1;
}