Component generation with styles with attribute selectors does not work.

[gunters63]

Given the following JSON input for component generation:

{
	".btn-disabled,.btn[disabled]": {
		"-TwBgOpacity":["1", "0.2"], 
		"backgroundColor":"hsla(var(--n,219 14% 28%)/var(--tw-bg-opacity))", 
		"-TwBorderOpacity":"0", 
		"-TwTextOpacity":["1", "0.2"], 
		"color":"hsla(var(--bc,215 28% 17%)/var(--tw-text-opacity))"
	}
}

the following markup:

<button disabled>BUTTON</button>

does not generate the expected style (This is the TailwindCSS generated style):

.btn-disabled,
.btn[disabled] {
	--tw-bg-opacity: 1;
	background-color: hsla(var(--n, 219 14% 28%)/var(--tw-bg-opacity));
	--tw-bg-opacity: 0.2;
	--tw-border-opacity: 0;
	--tw-text-opacity: 1;
	color: hsla(var(--bc, 215 28% 17%)/var(--tw-text-opacity));
	--tw-text-opacity: 0.2
}

In fact, nothing is generated, WindiCSS does not to seem to recognize the disabled attribute.

<button className="btn-disabled">BUTTON</button>

generates the following:

.btn-disabled {
  --tw-bg-opacity: 1;
  --tw-bg-opacity: 0.2;
  background-color: hsla(var(--n,219 14% 28%)/var(--tw-bg-opacity));
  --tw-border-opacity: 0;
  --tw-text-opacity: 1;
  --tw-text-opacity: 0.2;
  color: hsla(var(--bc,215 28% 17%)/var(--tw-text-opacity));
}

the attribute selector .btn[disabled] is missing.

[gunters63]

TailwindCSS and WindiCSS also differ in the order of the CSS variables (--tw-xxxx), I have to try out if this makes a difference