Formatter incorrectly formats CSS pseudo-element selectors

[Flo0807]

Hey!

It looks like the formatter is incorrectly formatting CSS pseudo-element selectors by moving one of the colons from the double-colon syntax (::).

I have the following class in my app:

[&.select::picker(select)]:bg-base-100

When I run mix format with the TailwindFormatter enabled, it becomes:

:[&.select:picker(select)]:bg-base-100

Note that one colon is moved to the front. This changes the behavior and breaks my app.

[Flo0807]

Probably related to #70

[Flo0807]

The issue is that we split variants on colons in https://github.com/100phlecs/tailwind_formatter/blob/v0.4.2/lib/tailwind_formatter.ex#L100

An idea to resolve this issue is to preserve arbitrary values and only split variants on colons that are outside square brackets.

For example

# arbitrary values are preserved
sort_variant_chains("sm:[&::after]:block") -> ["sm", "[&::after]:block"]

# normal variant chains still work
sort_variant_chains("normal:hover:text-red") -> ["normal", "hover", "text-red"]

[aptinio]

canonical_tailwind doesn't have this issue. It delegates sorting entirely to the tailwindcss CLI, so there's no manual variant splitting that could incorrectly break on colons inside arbitrary values like [&::after]. See #66 for the broader discussion.