CSS class validation too strict

The Needs Review Queue Bot → tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

The code seems updated in drupal core 9.5.2 so the patch no longer applies, but css classes like lg:grid-cols-4 are still being rejected when trying to save classes for a view.

"CSS classes must be alphanumeric or dashes only."

Here is a new patch, working with 9.5.3

The current patch still is an arbitrary Drupalism, e.g. it still does not allow ampersand or square brackets (which are used in TailwindCSS for inline selectors like [&_.my_child_container:text-red]).

The CSS class validator should follow official specs, not outdated shortcuts. Given the spec allows basically every symbol to be used as class name, maintaining an self-invented allow list is IMHO conceptionally flawed.

Also inadequate encoding (like e.g. the HTML ampersand encoding from &_something<div class="&amp;_something"> must be avoided: The ampersand is a valid symbol inside HTML class names, encoding it to an HTML entity results in an incorrect class name. (CSS itself does backslash prefixed hex encoding when it needs encoding, but encoding inside CSS files follows different rules than encoding CSS class names inside HTML)

Here is a good link demonstrating unescaped symbols in HTML class names and their represenation inside CSS:

https://mothereff.in/css-escapes

Rerolled against 11.x in the MR.

This is the patch that I'm using, it inherits from #27 🐛 CSS class validation too strict Needs work , I just updated the regex as
/[^\x{0026}\x{002D}\x{002E}\x{002F}\x{003A}\x{0030}-\x{005A}\x{005F}\x{005B}\x{005D}\x{0061}-\x{007A}\x{00A1}-\x{FFFF}]/u

So I allow these characters
{0026} &
{002D} -
{002E} .
{002F} /
{003A} :
{005F} _
{005B} [
{005D} ]
numbers
letters A-Z a-z