{"data":{"id":"magento2-37842","source":"github-pr","sourceRef":"magento/magento2#37842","title":"Difference in less compilation between php & nodejs library (grunt) with complicated `calc` expressions","pr":{"number":37842,"url":"https://github.com/magento/magento2/pull/37842","author":"hostep","mergedAt":"2024-09-12T01:23:44Z","mergeCommit":"d28c2a8a081425f74c780d4f19468830daf86ecc","headCommit":"14c00b30ea20fb3871f9e312893d1a0b7b9db080","baseRef":"2.4-develop","diffSha256":"b7ffa5295996f06347bb87dd01611275249855ca1923a2f58ffe171ded99583c"},"issues":[{"number":37841,"url":"https://github.com/magento/magento2/issues/37841","title":"Difference in less compilation between php & nodejs library (grunt) with complicated `calc` expressions","labels":["Area: Framework","Component: Frontend","Issue: Confirmed","Priority: P2","Progress: done","Reported on 2.4.x","Reproduced on 2.4.x","Triage: Dev.Experience"],"kind":"human"}],"fixedIn":"2.4.8","containingTags":["2.4.8","2.4.8-p1","2.4.8-p2","2.4.8-p3","2.4.8-p4","2.4.8-p5","2.4.9"],"reportedOn":null,"codeMatch":{"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.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.8":"conflict","2.4.8-p1":"conflict","2.4.8-p2":"conflict","2.4.8-p3":"conflict","2.4.8-p4":"conflict","2.4.8-p5":"conflict","2.4.9":"conflict"},"affectedVersions":["2.4.7","2.4.7-p1","2.4.7-p2","2.4.7-p3","2.4.7-p4","2.4.7-p5","2.4.7-p6","2.4.7-p7","2.4.7-p8","2.4.7-p9","2.4.7-p10"],"components":["magento/framework","magento/magento2-base"],"files":[{"path":"app/design/frontend/Magento/blank/web/css/source/_extends.less","change":"modified","package":"magento/magento2-base"},{"path":"app/design/frontend/Magento/luma/web/css/source/_extends.less","change":"modified","package":"magento/magento2-base"},{"path":"lib/internal/Magento/Framework/composer.json","change":"modified","package":"magento/framework"}],"stripped":{"tests":[],"docs":[],"outsideCode":["composer.json","composer.lock"]},"linesChanged":10,"mergeBatched":false,"excluded":null,"sections":{"description":"The `width: calc` expressions are different between the PHP less library & nodejs less library:","stepsToReproduce":"1. First run the less compilation through the less library in php:\n```shell\n$ rm -R var/view_preprocessed/* pub/static/*\n$ bin/magento setup:upgrade # needed to be able to visit frontend without js errors\n$ bin/magento setup:static-content:deploy -f en_US\n```\n2. Now copy the resulting files in some other directory:\n```shell\n$ cp -r pub/static/ /tmp/magento-scd-comparison\n```\n3. In one tab in your browser,  visit the frontend of the shop and click on Advanced Search in the footer and keep this open\n4. Now run the less compilation through grunt (so via nodejs instead of php):\n```shell\n$ rm -R var/view_preprocessed/* pub/static/*\n$ bin/magento setup:upgrade # needed to be able to visit frontend without js errors\n$ grunt clean:luma && grunt exec:luma && grunt less:luma\n```\n5. 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):\n```shell\n$ 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 calc\n```\nOutput:\n```diff\n-.form.search.advanced .fields.range .field.date input,\n-.form-giftregistry-edit .field.date input {\n-  margin-right: 10px;\n-  width: calc(100% - 33px);\n+.form-giftregistry-search .fields-specific-options .datetime-picker {\n+  margin-right: 10px;width: calc(100% - 23px + 10px);\n }\n .field .control._with-tooltip {\n   position: relative;\n }\n .field .control._with-tooltip input {\n-  margin-right: 10px;\n-  width: calc(100% - 36px);\n+  margin-right: 10px;width: calc(100% - 21px + 10px + 5px);\n }\n .checkout-index-index .modal-popup .field-tooltip .field-tooltip-content,\n .shipping-policy-block.field-tooltip .field-tooltip-content {\n```\n6. 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 tab","expectedResult":"The `width: calc` expressions are the same between the PHP less library & nodejs less library:\n\n```\nless.js:\n1. width: calc(100% - 23px + 10px);\n2. width: calc(100% - 21px + 10px + 5px);\n\nless.php:\n1. width: calc(100% - 23px + 10px); or width: calc(100% - 13px);\n2. width: calc(100% - 21px + 10px + 5px); or width: calc(100% - 6px);\n```","actualResult":"The `width: calc` expressions are different between the PHP less library & nodejs less library:\n\n```\nless.js:\n1. width: calc(100% - 23px + 10px);   => simplified: width: calc(100% - 13px);\n2. width: calc(100% - 21px + 10px + 5px); => simplified: width: calc(100% - 6px);\n\nless.php:\n1. width: calc(100% - 33px);\n2. width: calc(100% - 36px);\n```\n\nHow it looks with less.js:\n\n<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\">\n\nHow it looks with less.php:\n\n<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\">","source":"issue"},"signatures":[],"labels":{"area":["Framework"],"component":["Frontend"],"priority":"P2","severity":null,"reportedOn":["2.4.x"]},"categories":[],"triage":{"model":"@cf/cloudflare/clef","requestHash":"040e74c47d49c333c8be4283563caf3d20c86f081a759fec9fda8756030d3b9f","isBugfix":0.9039,"changeKind":{"choice":"bugfix","probabilities":{"bugfix":0.5687,"feature":0.0061,"refactor":0.0116,"tests_only":0.004,"docs_only":0.0033,"dependency":0.4063},"confidence":0.3864},"scope":{"score":0.8848,"probabilities":{"0":0.2171,"1":0.681,"2":0.1019},"confidence":0.2819},"risk":{"score":0.8083,"probabilities":{"0":0.2471,"1":0.6974,"2":0.0555},"confidence":0.3257},"area":{"choice":"frontend","probabilities":{"catalog":0.0108,"checkout":0.0061,"customer":0.005,"admin":0.0252,"graphql_api":0.0032,"framework":0.111,"frontend":0.8187,"other":0.02},"confidence":0.6386},"securityRelevant":0.0061,"reportedVersion":{"choice":"unspecified","probabilities":{"2.4.0":0.0081,"2.4.0-p1":0.0059,"2.4.1":0.0053,"2.4.1-p1":0.004,"2.4.2":0.0062,"2.4.2-p1":0.0052,"2.4.2-p2":0.0067,"2.4.3":0.0131,"2.4.3-p1":0.0119,"2.4.3-p2":0.0111,"2.4.3-p3":0.0077,"2.4.4":0.013,"2.4.4-p1":0.0096,"2.4.4-p10":0.0076,"2.4.4-p11":0.0087,"2.4.4-p12":0.0082,"2.4.4-p13":0.0088,"2.4.4-p14":0.0094,"2.4.4-p15":0.0065,"2.4.4-p16":0.0069,"2.4.4-p17":0.0068,"2.4.4-p18":0.0063,"2.4.4-p2":0.0038,"2.4.4-p3":0.0046,"2.4.4-p4":0.005,"2.4.4-p5":0.0056,"2.4.4-p6":0.0055,"2.4.4-p7":0.0064,"2.4.4-p8":0.0057,"2.4.4-p9":0.0047,"2.4.5":0.0107,"2.4.5-p1":0.0098,"2.4.5-p10":0.0077,"2.4.5-p11":0.0106,"2.4.5-p12":0.0095,"2.4.5-p13":0.008,"2.4.5-p14":0.0095,"2.4.5-p15":0.0064,"2.4.5-p16":0.0067,"2.4.5-p17":0.0076,"2.4.5-p2":0.0046,"2.4.5-p3":0.0065,"2.4.5-p4":0.0083,"2.4.5-p5":0.0062,"2.4.5-p6":0.0063,"2.4.5-p7":0.0077,"2.4.5-p8":0.0062,"2.4.5-p9":0.0051,"2.4.6":0.0158,"2.4.6-p1":0.014,"2.4.6-p10":0.0096,"2.4.6-p11":0.0113,"2.4.6-p12":0.0107,"2.4.6-p13":0.0107,"2.4.6-p14":0.0079,"2.4.6-p15":0.0077,"2.4.6-p2":0.006,"2.4.6-p3":0.0079,"2.4.6-p4":0.0093,"2.4.6-p5":0.0085,"2.4.6-p6":0.008,"2.4.6-p7":0.009,"2.4.6-p8":0.0066,"2.4.6-p9":0.0053,"2.4.7":0.0127,"2.4.7-p1":0.0108,"2.4.7-p10":0.0096,"2.4.7-p2":0.0069,"2.4.7-p3":0.0104,"2.4.7-p4":0.0129,"2.4.7-p5":0.0103,"2.4.7-p6":0.012,"2.4.7-p7":0.0087,"2.4.7-p8":0.0089,"2.4.7-p9":0.0055,"2.4.8":0.0106,"2.4.8-p1":0.0114,"2.4.8-p2":0.0128,"2.4.8-p3":0.0118,"2.4.8-p4":0.0121,"2.4.8-p5":0.0115,"2.4.9":0.0128,"unspecified":0.3043},"confidence":0.0881},"backportWorthy":{"score":0.8639,"probabilities":{"0":0.385,"1":0.366,"2":0.249},"confidence":0.0163}},"curated":null,"tests":null},"_documentation":"https://magento.watch/api","_description":"Upstream fix magento2-37842 details"}