[Issue] Fix missing escape less calc #30542
Labels
Area: Design/Frontend
Event: MageCONF CD 2020
Fixed in 2.4.x
The issue has been fixed in 2.4-develop branch
Issue: Confirmed
Gate 3 Passed. Manual verification of the issue completed. Issue is confirmed
Issue: Ready for Work
Gate 4. Acknowledged. Issue is added to backlog and ready for development
Priority: P4
No current plan to fix. Fixing can be deferred as a logical part of more important work.
Progress: done
Reported on 2.4.0
Indicates original Magento version for the Issue report.
Reproduced on 2.4.x
The issue has been reproduced on latest 2.4-develop branch
Severity: S4
Affects aesthetics, professional look and feel, “quality” or “usability”.
Uh oh!
There was an error while loading. Please reload this page.
This issue is automatically created based on existing pull request: #30453: Fix missing escape less calc
Description (*)
Magento 2.4-develop
We've escaped the content in the calc, this way the calc in the css output file will be correctly. Previously magento will return wrong calc value
Less: width: calc(100% - 20px);
Before fix
.block-reorder .product-item-name { float: left; width: calc(80%); }
Less: width: calc(~'100% - 20px');
After fix
.block-reorder .product-item-name { float: left; width: calc(100% - 20px); }
If less code contain variable escape will a little bit difference
Instead write like this: width: calc(100% - @indent__l);
We should write like this
width: ~'calc(100% - @{indent__l})';
or
width: calc(~'100% -' @{indent__l});
Related Pull Requests
Fixed Issues (if relevant)
Manual testing scenarios (*)
Case 1.
Actual Result: ✖️ .admin__payment-method-wrapper {width: calc(47%);}
Expected Result: ✔️ .admin__payment-method-wrapper {width: calc(50% - 3rem);}
Case 2
Actual Result: ✖️ .block-reorder .product-item-name {width: calc(80%);}
Expected Result: ✔️ .block-reorder .product-item-name {width: calc(100% - 20px);}
Questions or comments
Contribution checklist (*)
The text was updated successfully, but these errors were encountered: