CSS class validation too strict

Created on 8 December 2020, over 3 years ago
Updated 13 February 2024, 4 months ago

Problem/Motivation

CSS classes must be alphanumeric or dashes only. is thrown on colons. But colons is a valid CSS class and heavily utilized by https://tailwindcss.com

Steps to reproduce

Create a view, then attempt to add a CSS class that includes colons. You'll get an error. This should not be the case. Allow colons.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Views 

Last updated about 8 hours ago

Created by

heddn Nicaragua

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 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."

  • 🇦🇲Armenia le72 Yerevan 🇦🇲

    Here is a new patch, working with 9.5.3

  • 🇦🇹Austria hudri Austria

    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)

  • 🇦🇹Austria hudri Austria

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

    https://mothereff.in/css-escapes

  • First commit to issue fork.
  • 🇮🇳India sakthi_dev

    Rerolled against 11.x in the MR.

Production build 0.69.0 2024