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\-]*"';
Issue fork ui_patterns-3473393
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
Comment #3
b.khouyComment #5
pdureau commentedThanks Brahim.
$attr_name = "[a-zA-Z\-]+";: can yo uupdate$double_quoted_value = '"[\s\w\-]*"';Comment #6
b.khouy@pdureau
Can we reopen this issue ?
We need to account for all special characters used in Tailwind.
Here are some examples of Tailwind classes:
Comment #7
pdureau commentedLet'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
Comment #8
b.khouy@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:
I will create another issue for that.
Comment #9
pdureau commentedso you prefer to opt-in the expecting characters rather than opt-out the forbidden characters?
Comment #10
b.khouyYes, 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
Comment #11
pdureau commented