Allow more htmlClasses

[barryvdh]

Follow-up on #34559
Supports classes like w-screen left-1/2 right-1/2 mx-[-50vw] relative as used in Tailwind 3
See https://regexr.com/72318 vs https://regexr.com/72315

Resolved issues:

1. resolves [Issue] Allow more htmlClasses #36891: Allow more htmlClasses

[m2-assistant]

Hi @barryvdh. Thank you for your contribution
Here are some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento give me test instance - deploy test instance based on PR changes
• @magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

• @magento run all tests - run or re-run all required tests against the PR changes
• @magento run <test-build(s)> - run or re-run specific test build(s)
  For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names. Allowed build names are:

1. Database Compare
2. Functional Tests CE
3. Functional Tests EE,
4. Functional Tests B2B
5. Integration Tests
6. Magento Health Index
7. Sample Data Tests CE
8. Sample Data Tests EE
9. Sample Data Tests B2B
10. Static Tests
11. Unit Tests
12. WebAPI Tests
13. Semantic Version Checker

You can find more information about the builds here

ℹ️ Run only required test builds during development. Run all test builds before sending your pull request for review.

For more details, review the Magento Contributor Guide documentation.

⚠️ According to the Magento Contribution requirements, all Pull Requests must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

🕙 You can find the schedule on the Magento Community Calendar page.

📞 The triage of Pull Requests happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

✏️ Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

[Vinai]

Note: -screen left-1/2 right-1/2 mx-[-50vw] relative are all usable in tailwind v2, too (mx-[-50vw] only with the JIT)

[mrtuvn]

nice to see some class tailwind arbitrary values variants

[in-session]

@barryvdh can you make also a new pull for magento/magento2-page-builder#791

[barryvdh]

@in-session can you update your PR as it's not merged yet?

[mattgrul]

@barryvdh The following arbitrary values fail with this updated version - grid-rows-[auto 1fr]

Using only one value with no space within the square brackets seems to work however - grid-rows-[auto]

[barryvdh]

@mattgrul I'm not sure if that class is valid, but maybe we don't need such strict validation and just allow classes with ([a-zA-Z\d\-_/:.\[\]] *)* ?

https://regexr.com/737mk

[thijsdewitt]

Since Tailwind v3.1 you have Arbitrary values but for variants like [&:nth-child(3)]:py-0. This fails with this updated version.

[barryvdh]

Do we even need validation at that point 😓
https://regexr.com/73fp6 with [a-zA-Z\d\-_/:.\[\]\&() ]* ?

[jissereitsma]

@barryvdh In some CSS frameworks, the @ character is also used for CSS classes. Would it be an idea to include that character as well in your PR?

[barryvdh]

Sure thing

[Tjitse-E]

@barryvdh the commit that adds the at (@) sign seems breaks XML parsing:

Element '{http://www.w3.org/2001/XMLSchema}redefine': Failed to parse the XML resource 'urn:magento:framework:View/Layout/etc/elements.xsd'.
Line: 10

Error: Unescaped & or non terminated character/entity reference.

I've just tested with: [a-zA-Z\d\-_/:.\[\]&@() ]*, and that does work locally. Could you verify that?

[barryvdh]

Nevermind, [a-zA-Z\d\-_/:.\[\]&@() ]* seems correct indeed. Will adjust.

[barryvdh]

This will also need a change in module-page-builder/view/adminhtml/web/js/form/element/validator-rules-mixin.js though.

[engcom-Charlie]

Hi @barryvdh,

Thank you for your contribution!

I have tried to reproduce this issue in latest magento 2.4-develop, followed below steps, but the issue is not reproducible for us.

1. Adding htmlClass="product-info-main w-screen left-1/2 right-1/2 mx-[-50vw] relative md:max-w-2xl" in app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml file
2. Deploy static content and flush cache
   We are not getting any error on content deploy as well as on Product page.

Can you please let us know if we are missing anything in order to reproduce. We are waiting for your feedback on above comment too, till then moving it to On hold.

Thank you!

[hostep]

@engcom-Charlie: make sure you are running in developer mode, if you are running in production mode the error doesn't show up. Also make sure your caches are flushed just before visiting the product page.

I just tested it on a clean Magento from 2.4-develop, steps to reproduce:

• setup clean magento
• run bin/magento deploy:mode:set developer
• setup a category and product in the backoffice so you have something to go to on the frontend
• make a change like this:

diff --git a/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml b/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml
index 6e24f84f004..136bc5081f7 100644
--- a/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml
+++ b/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml
@@ -36,7 +36,7 @@
         </referenceBlock>

         <referenceContainer name="content">
-            <container name="product.info.main" htmlTag="div" htmlClass="product-info-main" before="-">
+            <container name="product.info.main" htmlTag="div" htmlClass="product-info-main w-screen left-1/2 right-1/2 mx-[-50vw] relative md:max-w-2xl" before="-">
                 <container name="product.info.price" label="Product info auxiliary container" htmlTag="div" htmlClass="product-info-price">
                     <container name="product.info.stock.sku" label="Product auxiliary info" htmlTag="div" htmlClass="product-info-stock-sku">
                         <container name="product.info.type" before="-"/>

• reindex + flush caches
• visit the product on the frontend
• you'll get an error like this:

1 exception(s):
Exception #0 (Magento\Framework\Config\Dom\ValidationException): Element 'container', attribute 'htmlClass': [facet 'pattern'] The value 'product-info-main w-screen left-1/2 right-1/2 mx-[-50vw] relative md:max-w-2xl' is not accepted by the pattern '[a-zA-Z][a-zA-Z\d\-_:]*(\s[a-zA-Z][a-zA-Z\d\-_:]*)*'.
Line: 800

With the changes proposed here in this PR and another cache flush, the error no longer happens.

[engcom-Charlie]

Hi @hostep,

Thank you for your guidance and contribution!

I have tested this PR as mentioned in above comment, the issue is reproducible and the solution given in this PR is working fine. Followed below steps.

✔️ QA Passed

Manual Scenario Steps

• setup magento

• run bin/magento deploy:mode:set developer

• created product in admin

• make a below changes:
  Adding htmlClass="product-info-main w-screen left-1/2 right-1/2 mx-[-50vw] relative md:max-w-2xl" in app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml file

• Reindex and flush cache

• Visit the created product on storefront

Before: ✖️

After: ✔️

Thank you!

[engcom-Charlie]

The functional test failure is not related to PR or not failing because of PR changes hence moving this to Merge in Progress.

Functional test B2B

[engcom-Lima]

@magento create issue

[thomas-kl1]

Fix #32004