Problem/Motivation

I’m using Tailwind in my project, and as you know, most Tailwind classes contain hyphens ("-"). When I try to pass these classes through the attributes prop in a component element, the form validation rejects all the classes with hyphens. After investigating, I found that the regex used in the AttributesWidget::buildRegexPattern method doesn’t allow hyphens, it only permits words and spaces.

Additionally, for attribute names, why limit them to only alphabetic characters? Hyphens are commonly used in attribute names, especially for data attributes, such as data-slider="3"

Proposed resolution

Allow hyphens in both the regex for attribute names and attribute values

in AttributesWidget::buildRegexPattern method definition update the regex from:

    // Attribute names are a mix of ASCII lower and upper alphas.
    $attr_name = "[a-zA-Z]+";
    // Allow anything in attributes values, which are between double quotes.
    $double_quoted_value = '"[\s\w]*"';

to:

    // Attribute names are a mix of ASCII lower and upper alphas.
    $attr_name = "[a-zA-Z\-]+";
    // Allow anything in attributes values, which are between double quotes.
    $double_quoted_value = '"[\s\w\-]*"';
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

b.khouy created an issue. See original summary.

b.khouy’s picture

Assigned: b.khouy » Unassigned
Status: Needs work » Needs review

  • pdureau committed 0e3d171c on 2.0.x authored by b.khouy
    Issue #3473393 by b.khouy: Allow hyphens in attributes props' names and...
pdureau’s picture

Status: Needs review » Fixed

Thanks Brahim.

$attr_name = "[a-zA-Z\-]+";: can yo uupdate

$double_quoted_value = '"[\s\w\-]*"';

b.khouy’s picture

@pdureau

Can we reopen this issue ?
We need to account for all special characters used in Tailwind.
Here are some examples of Tailwind classes:

  • bg-blue-500
  • hover:bg-blue-500
  • w-1/2
  • w-1.5
  • text-[16px]
  • bg-[#ff5733]
  • [&_img]:rounded
  • [&_>p]:text-primary
pdureau’s picture

Let's create another issue for beta2 if we can do that today.

So, we need to replace \s\w\- in $double_quoted_value = '"[\s\w\-]*"'; by something catching all characters except:

Source: https://html.spec.whatwg.org/#attributes-2

b.khouy’s picture

@pdureau
Yes, this applies only to the regex for double-quoted values (the attribute name regex is fine). Here's a regex that includes only the allowed special characters:

$double_quoted_value = '"[\s\w\-_:&\[\]\/>\*]*"';

I will create another issue for that.

pdureau’s picture

so you prefer to opt-in the expecting characters rather than opt-out the forbidden characters?

b.khouy’s picture

Yes, because we know the specific list of allowed special characters in Tailwind, it's easier to define that list explicitly rather than managing all the other forbidden special characters.

Here is the related issue: [2.0.0-beta2] The regex for attribute (values) props should allow all Tailwind allowed special characters

pdureau’s picture

Status: Fixed » Closed (fixed)