CSS identifiers created via `Html::cleanCssIdentifier` shouldn't strip colons

If colons are allowed by the W3 in class names (I guess Tailwinds doesn’t break pseudo-classes in the style sheet?) then this is a bug. But also note the character is configurable: https://tailwindcss.com/docs/configuration/#app

So an escaped colon is stripped too?

The issue isn't with the colons, specifically. It's with escaped characters more generally. There's a sister issue at #2916377: Html::cleanCssIdentifier Strips Valid Escaped Characters where they're solving for slash and '@' sign (but not colons).

I'm using the patch provided in #2. I also acknowledge the authors comment in #5 about unintended consequences. With that said, is there a way to update the preg_replace parameters to be less greedy? Or, phrased a little differently, to only allow colons in specific class names that I allow?

Here is an example of the USWDS class names that I am using:
desktop:grid-col-3 tablet:grid-col-6 usa-card mobile-lg:grid-col-12

While USWDS has way too many combos if you factor in the left and right side of the colon (2,828 unique combos to be exact), the left side boils down to:
*desktop:
*hover:
*mobile-lg:
*tablet:

The only challenge might be dealing with the spots that use desktop:hover: / mobile-lg:hover / tablet:hover but I'm not worried about that.

So is there a way to update pattern parameter to include a check for the literal string of "desktop:" or the unicode equivalent? I know there is a way in regex in general and I was trying to work my way through it last night but then killed my installation and couldn't get back even after undoing my changes.

    $identifier = preg_replace('/[^\x{002D}\x{0030}-\x{0039}\x{0041}-\x{005A}\x{005F}\x{0061}-\x{007A}\x{00A1}-\x{FFFF}]/u', '', $identifier);

Thanks for any help. Yes, I know that putting in these literal exceptions is not a good fix, but I want to avoid the unintended consequences of changing a whole bunch of Drupal generated class names.

Well that didn't take long to run into the unintended consequences of the greedy colon replacement. Lots of colons started showing up in the various Drupal managed class names, especially around views and blocks. I spent a couple hours trying to modify the regex pattern to try to narrow it down to something along the lines of \b(desktop|tablet|mobile-lg)\:\b but didn't have much luck. To make it work for now, I added code to replace the colons with a placeholder and then swapped them back out after the stripping call.

    // The USWDS CSS uses colons in CSS identifiers (class names) in order to support
    // responsive prefixes and state variants. By default Drupal strips out the extra colons.
    // An easy fix would have been to add the colon (: or U+003A) to the next section
    // that identifies the valid characters. However, by broadly allowing colons, existing
    // classes are impacted. An example of this greedy replacement is seen in the 
    // Home Page Card div wrapper:
    //   Before: block-views-blockhome-page-cards-provider
    //   After:  block-views-block:home-page-cards-provider
    //
    // To reduce the unintended consequences of broadly replacing 
    // colons in everything, we are going to specifically look for the USWDS occurrences
    // that we are interested in keeping. These are:
    //   - desktop:
    //   - tablet:
    //   - mobile-lg:
    // 
    // A relevant USWDS class descriptor from our site is from the Home Page Cards:
    //   desktop:grid-col-3 tablet:grid-col-6 usa-card mobile-lg:grid-col-12
    //
    // To accomplish our goal, we will replace the existing occurrences with '-safecolon-'.
    // After the stripping in the next secton, we will then revert the occurrences of
    // '-safecolon-' back to regular colons (:). Note that we are replacing all three 
    // identifiers separately initially. We do this to preserve the (desktop|tablet|mobile-lg)
    // uniqueness. But when we go to switch it back, we can replace it with a single line.
    // See https://www.drupal.org/project/drupal/issues/3050007 for additional information.
    $identifier = preg_replace('/\bdesktop\x{003A}\b/u', 'desktop-safecolon-', $identifier);
    $identifier = preg_replace('/\btablet\x{003A}\b/u', 'tablet-safecolon-', $identifier);
    $identifier = preg_replace('/\bmobile-lg\x{003A}\b/u', 'mobile-lg-safecolon-', $identifier);

    // Valid characters in a CSS identifier are:
    // - the hyphen (U+002D)
    // - a-z (U+0030 - U+0039)
    // - A-Z (U+0041 - U+005A)
    // - the underscore (U+005F)
    // - 0-9 (U+0061 - U+007A)
    // - ISO 10646 characters U+00A1 and higher
    // We strip out any character not in the above list.
    $identifier = preg_replace('/[^\x{002D}\x{0030}-\x{0039}\x{0041}-\x{005A}\x{005F}\x{0061}-\x{007A}\x{00A1}-\x{FFFF}]/u', '', $identifier);

    // Now we need to replace our -safecolon- placeholder with a regular colon.
    // See notes above about why we are doing this.
    $identifier = preg_replace('/\b\x{002D}safecolon\x{002D}\b/u', ':', $identifier);

I acknowledge it is a bit of a hack but I'm at least trying to narrow the scope of the replacement as much as possible. At the end of the day, I really need to support the USWDS use of colons. We have already created custom twig files in a couple of scenarios just to be able to use the colons in class names. This 'fix' should prevent that from multiplying going forward.

I am not wrapping it in a patch since I don't think this is the best solution that will work for everyone. I am however posting the code in case it helps someone else out.

Wondering if there has been any change? Still an issue for uswd and more gov sites are using uswds now.

I don’t understand the question.

Just seeing if anyone has come up with a good solution. Thought about whitelisting the class attribute but that doesn't seem right. USWDS library has been picking up steam lately so this is becoming an issue across multiple projects.

This issue isn't limited to just a colon within libraries. Some libraries also use '@' symbols in their css classes. e.g. uikit. https://getuikit.com/docs/visibility

Seems like the colon was included in #2916377: Html::cleanCssIdentifier Strips Valid Escaped Characters now too.

I'm going to close this as a duplicate but feel free to re-open this issue is you feel this is addressing a different issue, or that you feel the colon needs a separate issue.