[Issue] Put division calculations in less files in parentheses if they were not there alr…

[m2-assistant]

This issue is automatically created based on existing pull request: #38335: Put division calculations in less files in parentheses if they were not there alr…

---

…eady, this fixes generating correct css again after the upgrade to less.js v4 in AC-8098 & AC-9713.

Description (*)

This PR comes from discussion in #38109 (comment), just some notes:

• v4 of the less.js library is not backwards compatible with v3, all division calculations should be put in parentheses now.

• I've only tested with Magento Open Source, it's likely that more changes will be needed for Magento Commerce and B2B (and whatever other products are out there)

• I currently forgot to look into all the other modules that aren't included in this core Magento one, like pagebuilder, MSI, security-package, ... Those might need work as well...
  Update: only pagebuilder was affected, I created PR 860 on the magento2-page-builder repo to fix it there
  Update 2: it turns out this wasn't need, so all is good here

• I've tested this with the 3 themes included in Magento Opensource: Magento/blank, Magento/luma & Magento/backend, I know that Magento Commerce comes with a 4th theme as well and maybe there are more themes in the other products, I have no idea, so all should be tested

• Update: I've also tested bin/magento setup:static-content:deploy (which uses a different less compiler) and compared the compiled css before these changes and after these changes and could see no differences, which is good 👍

• About the flag strictMath that was changed in dev/tools/grunt/configs/less.js, my idea was that this would highlight problematic code faster to custom theme developers, but from working on this PR, it only detects a very little amount of problems, so not sure if this is a good idea or not
  Update: this wasn't a good idea, this has been reverted now

• The change in lib/web/css/source/lib/_utilities.less to @{_property}: (@_value); was a quick way to fix a bunch of different issues at the same time, not sure if that's the best way, also not sure if still needed, this was one of my first fixes, and I didn't want to re-test after all the hours I already spent on this
  Update: I've removed this fix, and fixed the root causes instead

• The majority of failing static tests are bugs in the coding standards (example 1, example 2, the other ones haven't been reported yet I think) and in my opinion we shouldn't fix those in this scope of this PR. And the PR should be approved even with those failing.

Related Pull Requests

Fixed Issues (if relevant)

Manual testing scenarios (*)

1. Setup 2 copies of Magento code base next to each other
2. In one copy, keep using less.js in the package.json.sample file, in the other copy, downgrade it back to version v3, like this:

@@ -18,7 +18,7 @@
     "grunt-contrib-cssmin": "~5.0.0",
     "grunt-contrib-imagemin": "~4.0.0",
     "grunt-contrib-jasmine": "~4.0.0",
-    "grunt-contrib-less": "~3.0.0",
+    "grunt-contrib-less": "~2.1.0",
     "grunt-contrib-watch": "~1.1.0",
     "grunt-eslint": "~24.3.0",
     "grunt-exec": "~3.0.0",
@@ -27,7 +27,7 @@
     "grunt-template-jasmine-requirejs": "~0.2.3",
     "grunt-text-replace": "~0.4.0",
     "imagemin-svgo": "~9.0.0",
-    "less": "4.2.0",
+    "less": "~3.13.1",
     "load-grunt-config": "~4.0.1",
     "morgan": "~1.10.0",
     "node-minify": "~3.6.0",

3. Note, only in the copy of Magento where we use less.js v4, you should test the changes from this PR.
4. Execute following steps in both magento copies:

$ cp package.json.sample package.json
$ cp Gruntfile.js.sample Gruntfile.js
$ rm -Rf node_modules/ package-lock.json
$ npm install
$ grunt clean:backend && grunt exec:backend && grunt less:backend && grunt clean:blank && grunt exec:blank && grunt less:blank && grunt clean:luma && grunt exec:luma && grunt less:luma

5. Now compare the generated *.css files in pub/static from both copies. The output should be identical.
6. We should also test the php less compilation with bin/magento setup:static-content:deploy and compare the compiled css before these changes and after these changes and see that there are no differences

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)
• README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
• All automated tests passed successfully (all builds are green)

[m2-assistant]

Hi @engcom-November. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: 👇

• 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• 4. Verify that the issue is reproducible on 2.4-develop branch
  Details

  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!
• 5. Add label Issue: Confirmed once verification is complete.
• 6. Make sure that automatic system confirms that report has been added to the backlog.

[engcom-November]

Hello @hostep,

Thank you for the report and collaboration!

Made two instance of 2.4-develop, one with less 3.13.1 and another with 4.2.0(which is default in 2.4-dev).
We see no issues when running the grunt less:backend and grunt less:blank command in less 3.13.1, but with 4.2.0 we are seeing the below errors respectively.

>> pub/static/adminhtml/Magento/backend/en_US/css/source/lib/variables/_sections.less: [L49:C0] Operation on an invalid type
Warning: Error compiling pub/static/adminhtml/Magento/backend/en_US/css/styles.less Use --force to continue.

>> pub/static/frontend/Magento/blank/en_US/css/source/lib/_responsive.less: [L69:C8] Error evaluating function `ceil`: argument must be a number
Warning: Error compiling pub/static/frontend/Magento/blank/en_US/css/styles-l.less Use --force to continue.

We were able to see the difference that you mentioned here #38109 (comment), when running the grunt command forcefully.
Please take a loot at the screenshot below:

Hence confirming this issue.

Thank you.

[github-jira-sync-bot]

✅ Jira issue https://jira.corp.adobe.com/browse/AC-10850 is successfully created for this GitHub issue.

[m2-assistant]

✅ Confirmed by @engcom-November. Thank you for verifying the issue.
Issue Available: @engcom-November, You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself.