backdrop-issues
backdrop-issues copied to clipboard
Update filtering functions to allow additional characters in CSS classes
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.