Skip to content

[Issue] Fix missing escape less calc #30542

Closed
@m2-assistant

Description

@m2-assistant

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)

  1. Fixes magento/magento2#<issue_number>

Manual testing scenarios (*)

Case 1.

  1. Go to order creation page in admin panel;
  2. Find class admin__payment-method-wrapper , admin__field-control (theme backend)
  3. Make sure the final calc shows the correct value in output CSS

Actual Result: ✖️ .admin__payment-method-wrapper {width: calc(47%);}

2020-10-19_11-30

Expected Result: ✔️ .admin__payment-method-wrapper {width: calc(50% - 3rem);}

2020-10-19_11-47

Case 2

  1. Go to Storefront (Recently Ordered block);
  2. Find class .block-reorder .product-item-name (theme luma)
  3. Make sure the final calc show correct value in output css

Actual Result: ✖️ .block-reorder .product-item-name {width: calc(80%);}

2020-10-19_12-18

Expected Result: ✔️ .block-reorder .product-item-name {width: calc(100% - 20px);}

2020-10-19_12-06

Questions or comments

Contribution checklist (*)

  • Pull request has a meaningful description of its purpose
  • All commits are accompanied by meaningful commit messages
  • All new or changed code is covered with unit/integration tests (if applicable)
  • All automated tests passed successfully (all builds are green)

Metadata

Metadata

Assignees

Labels

Area: Design/FrontendEvent: MageCONF CD 2020Fixed in 2.4.xThe issue has been fixed in 2.4-develop branchIssue: ConfirmedGate 3 Passed. Manual verification of the issue completed. Issue is confirmedIssue: Ready for WorkGate 4. Acknowledged. Issue is added to backlog and ready for developmentPriority: P4No current plan to fix. Fixing can be deferred as a logical part of more important work.Progress: doneReported on 2.4.0Indicates original Magento version for the Issue report.Reproduced on 2.4.xThe issue has been reproduced on latest 2.4-develop branchSeverity: S4Affects aesthetics, professional look and feel, “quality” or “usability”.

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions