UPSTREAM FIX
magento2-37842: Difference in less compilation between php & nodejs library (grunt) with complicated…
Community fix magento2-37842 merged into magento/magento2 on 2024-09-12, released in 2.4.8; applies cleanly to 11 releases from 2.4.7 to 2.4.7-p10.
- Pull request title
- Difference in less compilation between php & nodejs library (grunt) with complicated `calc` expressions
- Pull request
- magento/magento2#37842
- Issues
- #37841 human
- Author
- @hostep
- Merged
- 2024-09-12
- Fixed in
- 2.4.8
- Reported on
- —
- Categories
- —
- Components
- magento/framework, magento/magento2-base
Labels
- Area
- Framework
- Component
- Frontend
- Priority
- P2
- Severity
- —
- Reported on (labels)
- 2.4.x
Issue
Title and steps come from the upstream issue and pull request.
Description
The
width: calc expressions are different between the PHP less library & nodejs less library:Steps to reproduce
1. First run the less compilation through the less library in php:
4. Now run the less compilation through grunt (so via nodejs instead of php):
$ rm -R var/view_preprocessed/* pub/static/* $ bin/magento setup:upgrade # needed to be able to visit frontend without js errors $ bin/magento setup:static-content:deploy -f en_US2. Now copy the resulting files in some other directory:
$ cp -r pub/static/ /tmp/magento-scd-comparison3. In one tab in your browser, visit the frontend of the shop and click on Advanced Search in the footer and keep this open
4. Now run the less compilation through grunt (so via nodejs instead of php):
$ rm -R var/view_preprocessed/* pub/static/* $ bin/magento setup:upgrade # needed to be able to visit frontend without js errors $ grunt clean:luma && grunt exec:luma && grunt less:luma5. Now compare the resulting files with the ones you copied before, I'm focusing here on something very specific (not all changes are relevant or important here):
$ diff -u /tmp/magento-scd-comparison/frontend/Magento/luma/en_US/css/styles-m.css pub/static/frontend/Magento/luma/en_US/css/styles-m.css | grep -C3 calcOutput:
-.form.search.advanced .fields.range .field.date input,
-.form-giftregistry-edit .field.date input {
- margin-right: 10px;
- width: calc(100% - 33px);
+.form-giftregistry-search .fields-specific-options .datetime-picker {
+ margin-right: 10px;width: calc(100% - 23px + 10px);
}
.field .control._with-tooltip {
position: relative;
}
.field .control._with-tooltip input {
- margin-right: 10px;
- width: calc(100% - 36px);
+ margin-right: 10px;width: calc(100% - 21px + 10px + 5px);
}
.checkout-index-index .modal-popup .field-tooltip .field-tooltip-content,
.shipping-policy-block.field-tooltip .field-tooltip-content {6. In a second tab in your browser, visit the frontend of the shop and click on Advanced Search in the footer and compare it to your first tabExpected result
The
width: calc expressions are the same between the PHP less library & nodejs less library:less.js: 1. width: calc(100% - 23px + 10px); 2. width: calc(100% - 21px + 10px + 5px); less.php: 1. width: calc(100% - 23px + 10px); or width: calc(100% - 13px); 2. width: calc(100% - 21px + 10px + 5px); or width: calc(100% - 6px);
Actual result
The
<img width="702" alt="Screenshot 2023-08-03 at 17 41 03" src="https://github.com/magento/magento2/assets/85479/0db0f2d2-8efc-4898-8552-88d6c9047b71">
How it looks with less.php:
<img width="715" alt="Screenshot 2023-08-03 at 17 38 36" src="https://github.com/magento/magento2/assets/85479/c8cb60e9-315d-4689-81e1-ac6ea1f09628">
width: calc expressions are different between the PHP less library & nodejs less library:less.js: 1. width: calc(100% - 23px + 10px); => simplified: width: calc(100% - 13px); 2. width: calc(100% - 21px + 10px + 5px); => simplified: width: calc(100% - 6px); less.php: 1. width: calc(100% - 33px); 2. width: calc(100% - 36px);How it looks with less.js:
<img width="702" alt="Screenshot 2023-08-03 at 17 41 03" src="https://github.com/magento/magento2/assets/85479/0db0f2d2-8efc-4898-8552-88d6c9047b71">
How it looks with less.php:
<img width="715" alt="Screenshot 2023-08-03 at 17 38 36" src="https://github.com/magento/magento2/assets/85479/c8cb60e9-315d-4689-81e1-ac6ea1f09628">
Taken from the upstream issue.
Code match per tag
Each tag was checked with git apply --check against that tag's files. A clean match means the change applies; it is not a test result. Tags that already contain the fix are marked.
| Line | Code match per tag | Tests |
|---|---|---|
| 2.4.6 | 2.4.6 conflict 2.4.6-p1 conflict 2.4.6-p2 conflict 2.4.6-p3 conflict 2.4.6-p4 conflict 2.4.6-p5 conflict 2.4.6-p6 conflict 2.4.6-p7 conflict 2.4.6-p8 conflict 2.4.6-p9 conflict 2.4.6-p10 conflict 2.4.6-p11 conflict 2.4.6-p12 conflict 2.4.6-p13 conflict 2.4.6-p14 conflict 2.4.6-p15 conflict | 2.4.6: no test data 2.4.6-p1: no test data 2.4.6-p2: no test data 2.4.6-p3: no test data 2.4.6-p4: no test data 2.4.6-p5: no test data 2.4.6-p6: no test data 2.4.6-p7: no test data 2.4.6-p8: no test data 2.4.6-p9: no test data 2.4.6-p10: no test data 2.4.6-p11: no test data 2.4.6-p12: no test data 2.4.6-p13: no test data 2.4.6-p14: no test data 2.4.6-p15: no test data |
| 2.4.7 | 2.4.7 clean 2.4.7-p1 clean 2.4.7-p2 clean 2.4.7-p3 clean 2.4.7-p4 clean 2.4.7-p5 clean 2.4.7-p6 clean 2.4.7-p7 clean 2.4.7-p8 clean 2.4.7-p9 clean 2.4.7-p10 clean | 2.4.7: no test data 2.4.7-p1: no test data 2.4.7-p2: no test data 2.4.7-p3: no test data 2.4.7-p4: no test data 2.4.7-p5: no test data 2.4.7-p6: no test data 2.4.7-p7: no test data 2.4.7-p8: no test data 2.4.7-p9: no test data 2.4.7-p10: no test data |
| 2.4.8 | 2.4.8 conflictcontains the fix 2.4.8-p1 conflictcontains the fix 2.4.8-p2 conflictcontains the fix 2.4.8-p3 conflictcontains the fix 2.4.8-p4 conflictcontains the fix 2.4.8-p5 conflictcontains the fix | 2.4.8: no test data 2.4.8-p1: no test data 2.4.8-p2: no test data 2.4.8-p3: no test data 2.4.8-p4: no test data 2.4.8-p5: no test data |
| 2.4.9 | 2.4.9 conflictcontains the fix | 2.4.9: no test data |
Triage
Model @cf/cloudflare/clef. Probability this is a bug fix: 90.4%. Probability it is security relevant: 0.6%.
Show the model's answers and probabilities
| Question | Answer | Probabilities | Confidence |
|---|---|---|---|
| Change kind | bugfix | bugfix 56.9%, dependency 40.6%, refactor 1.2%, feature 0.6%, tests_only 0.4%, docs_only 0.3% | 38.6% |
| Area | frontend | frontend 81.9%, framework 11.1%, admin 2.5% | 63.9% |
| Reported version | unspecified | unspecified 30.4%, 2.4.6 1.6%, 2.4.6-p1 1.4% | 8.8% |
| Scope | 0.88 of 2 | 1 68.1%, 0 21.7%, 2 10.2% | 28.2% |
| Risk | 0.81 of 2 | 1 69.7%, 0 24.7%, 2 5.5% | 32.6% |
| Worth backporting | 0.86 of 2 | 0 38.5%, 1 36.6%, 2 24.9% | 1.6% |
Download
For cweagans/composer-patches, choose a version below and download the bundle. Copy its magento2-37842/ folder into patches/composer/, merge composer.patches.json into composer.json, then run composer install. Test files are always removed; paths are relative to each package root, using the default -p1 level.
Bundle README (what the ZIP ships)
# magento2-37842 Community fix merged upstream into magento/magento2, adapted by magento.watch. This is not a patch published by Adobe. Pull request: https://github.com/magento/magento2/pull/37842 Issue: https://github.com/magento/magento2/issues/37841 Author: @hostep Source commit: 14c00b30ea20fb3871f9e312893d1a0b7b9db080 Modifications: test files and documentation removed, paths rewritten relative to each Composer package. Licence: OSL-3.0 / AFL-3.0, as the original Magento Open Source code. Maintainer: Łukasz Bajsarowicz (@lbajsarowicz)
Licence: Magento Open Source code under OSL-3.0 and AFL-3.0. The bundle carries the original author, source commit and the list of modifications.
