[Feature]: support vars in square brackts

[s-cork]

Describe the problem

i want to do something like bg-[--my-var]

expected output

.bg-\[--my-var\] {
    background-color: var(--my-var);
}

actual output

.bg-\[--my-var\] {
}

I also tried doing bg-[var(--my-var)]

but ended up with the output:

.bg-\[var(--my-var\)] {
    background-image: var(--my-var);
}

which seems like a bug

Describe the proposed solution

support vars like tailwind css:
https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

Alternatives considered

No response

Importance

would make my life easier

Additional Information

No response