Incorrectly rewrites classnames with :state in name

[mitchellklijs]

In CSS, classnames may have colons (:). Tailwind CSS uses a state followed by a colon to express a utility class that only applies when that state is active (see https://tailwindcss.com/docs/hover-focus-and-other-states). An example could be: hover:border-red. This would apply the style for border-red only when the element is hovered.

The example (hover:border-red) would have the following generated CSS (by Tailwind):

.hover:border-red:hover {border: red;}

This is rewritten by the addon to:

.hover:border-red:hover, .hover:border-red.pseudo-hover, .pseudo-hover .hover:border-red {border: red;}

This rewrite is correct. However, when you combine two states, for example focus:hover:border-red. The translation is incorrect.

The example class translates to the following generated CSS (by Tailwind):

.focus:hover:border-red:hover:focus {border: red;}

The addon rewrites this to:

.focus:hover:border-red:hover:focus, .focus.pseudo-hover:border-red.pseudo-hover.pseudo-focus, .pseudo-hover.pseudo-hover.pseudo-focus .focus:border-red {border:red;}

Which is incorrect. The first :hover is also replaced by pseudo-hover.

The correct output would be:

.focus:hover:border-red:hover:focus, .focus:hover:border-red.pseudo-hover.pseudo-focus, .pseudo-hover.pseudo-focus .focus:hover:border-red {border:red;}

In short; when classnames have a colon followed by a state name in them, they are incorrectly replaced with the pseudo-states.