backdrop-issues icon indicating copy to clipboard operation
backdrop-issues copied to clipboard

Update filtering functions to allow additional characters in CSS classes

Open tkcent opened this issue 3 months ago • 23 comments

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. Also, Views uses _filter_xss_attributes for all attributes (which has a different set of rules), but should use backdrop_clean_css_identifier for class attributes for consistency.

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 avatar Nov 10 '24 02:11 tkcent