Wrong class name generated when used with TailwindCSS

[bp-pedro-rodrigues]

Describe the bug
The pseudo-classes are not generated correctly when the original classname contains a :.

To Reproduce
TailwindCSS uses classnames on elements to control the styling when hover or focus, or whatever happens. The way they do this is by prefixing their regular classes with hover: or focus: or other switches.
When picking up these classes, the generated ones have an additional \. before the :. As in, if you have:

<div className="hover:text-gray-400:hover">test</div>

the class

.hover\.\:text-gray-400.\:hover

gets generated.

Expected behavior
The correct class name gets generated. In this case:

.hover\:text-gray-400.\:hover

[philippone]

Hi @bp-pedro-rodrigues ,

I added the functionality to the postcss-pseudo-classes plugin to escape : additionally.

Unfortunately, the maintainer of the repo/package ignores my pull requests.
Therefore, please install my fork and test the functionality:

npm install -D https://github.com/philippone/postcss-pseudo-classes#colon-test

The expected class .hover\:text-gray-400.\:hover is now generated.