Fix missing escape less calc

[mrtuvn]

Description (*)

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 (*)

Scenario 1
Backend theme change

1. Check file css output styles-m.css
2. Find class admin__payment-method-wrapper , admin__field-control (theme backend)
3. Make sure the final calc show correct value in output css

Scenario 2
Luma theme change

1. Check file css output styles-m.css
2. Find class .block-reorder .product-item-name (theme luma)
3. Make sure the final calc show correct value in output css

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)

Resolved issues:

1. resolves [Issue] Fix missing escape less calc #30542: Fix missing escape less calc

[m2-assistant]

Hi @mrtuvn. Thank you for your contribution
Here is 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

You can find more information about the builds here

ℹ️ Please run only needed test builds instead of all when developing. Please run all test builds before sending your PR for review.

For more details, please, 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, please join the Community Contributions Triage session to discuss the appropriate ticket.

🎥 You can find the recording of the previous Community Contributions Triage on the Magento Youtube Channel

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

[mrtuvn]

@krzksz can you review this ? Thanks

[m2-assistant]

Hi @mrtuvn, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

[m2-assistant]

Hi @mrtuvn. Thank you for your contribution
Here is 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

You can find more information about the builds here

ℹ️ Please run only needed test builds instead of all when developing. Please run all test builds before sending your PR for review.

For more details, please, review the Magento Contributor Guide documentation.

[ihor-sviziev]

Oops, sorry, just pressed wrong button. Re-opened.

[ihor-sviziev]

@magento run all tests

[magento-engcom-team]

Hi @ihor-sviziev, thank you for the review.
ENGCOM-8334 has been created to process this Pull Request

[magento-engcom-team]

Hi @ptylek, thank you for the review.
ENGCOM-8334 has been created to process this Pull Request

[engcom-Alfa]

✔️ QA Passed

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

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

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

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

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

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

[engcom-Alfa]

@magento create issue

[m2-assistant]

Hi @mrtuvn, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.