Unable to compose certain Tailwind CSS classes that contain colons

[fpauser]

Colons in css classnames should be unescaped when applied to html.

For example - this styles.scss:

.fancy {
  composes: text-grey-dark hover\:text-grey-lightest from global;
}

together with this template:

<span local-class="fancy">
  SAMPLE TEXT
</span>

produces the following incorrect html (wrong classname hover\:text-grey-lightest)

<div class="_fancy_iaj7hm text-grey-dark hover\:text-grey-lightest">
  SAMPLE TEXT
</div>

instead of this correct html (correct classname hover:text-grey-lightest):

<div class="_fancy_iaj7hm text-grey-dark hover:text-grey-lightest">
  SAMPLE TEXT
</div>

[dfreeman]

I think ideally you'd be able to avoid escaping the colon, since everything there is implicitly a class name, but I suspect that's a limitation of the PostCSS parser itself, so we're probably stuck there.

Given that limitation, I think the underlying css modules postcss plugins we're using ought to handle this, but pushing through changes there can be difficult, so it probably makes sense to un-escape values in broccoli-css-modules. If I get a chance at some point I can take a look at that, but I'm also happy to accept a PR in the meantime if you want to take a crack at it 🙂

[fpauser]

As a workaround I use a different separator for now ('|' instead of ':'). See https://tailwindcss.com/docs/configuration/#separator.

This way hover:bg-gray-500 becomes hover|bg-gray-500 - better than nothing ;)