Allow additional characters in backdrop_clean_css_identifier()

[tkcent]

Inspired by Drupal issue: https://www.drupal.org/project/drupal/issues/2916377

Description of the need

Escaped characters in CSS classes are valid. Several popular CSS/Sass libraries use escaped characters (particularly ones which use the BEM methodology) to denote special uses or characteristics of a CSS class.

For instance, the inuitcss CSS library uses the @ character in CSS classes for identifying responsive breakpoint classes and the forward slash / character for fractional grid column classes.

Other examples include Tailwind CSS (colon and slash) and UIkit (at).

Proposed solution

Update backdrop_clean_css_identifier() to include additional special characters.

Alternatives that have been considered

None.

Additional information

This will allow responsive class names to be used in Style settings of Layout regions.

Draft of feature description for Press Release (1 paragraph at most)

Backdrop doesn't filter special characters in class names used in popular CSS frameworks such as Tailwind CSS and UIkit.

[tkcent]

Proposed code changes:

% diff common.inc common.inc.new

4304c4304
< function backdrop_clean_css_identifier($identifier, $filter = array(' ' => '-', '_' => '-', '/' => '-', '[' => '-', ']' => '')) {
---
> function backdrop_clean_css_identifier($identifier, $filter = array(' ' => '-', '_' => '-', '[' => '-', ']' => '')) {
4309a4310,4312
>   // - the period (U+002E)
>   // - the slash (U+002F)
>   // - the colon (U+003A)
4310a4314
>   // - the @ sign (U+0040)
4316c4320
<   $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);
---
>   $identifier = preg_replace('/[^\x{002D}\x{002E}\x{002F}\x{003A}\x{0030}-\x{005A}\x{005F}\x{0061}-\x{007A}\x{00A1}-\x{FFFF}]/u', '', $identifier);

[tkcent]

Previous diff is wrong. The Drupal issue does not properly list the Unicode characters in HEX order. Correct preg pattern line should be:

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

Alternately, the syntax could be shortened to the following, but then the alphanumeric ranges would not be specifically listed.

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

[tkcent]

Looking through the Drupal issue queue, there were some concerns about backwards compatibility but those seem to be tied to Twig.

https://www.drupal.org/project/drupal/issues/2916377

[stpaultim]

@tkcent - You are the one working on a possible new contrib theme, right? Is this blocking you at all? Or does this just limit how people are able to use the classes in your new theme in the UI?

Are you able to create a PR for this issue?

[tkcent]

@stpaultim Correct, I am working on a new theme based on UIkit. It doesn't necessarily block me, because I can work around things by modifying template files, but it would definitely make it easier for non-technical users to be able to use the classes right in the layout settings.

PR already created! 👆🏻