Different results from compiling less with Grunt or with "server side compilation"

[slackerzz]

Preconditions (*)

1. Magento 2.3.x (tried both CE and EE)
2. Ubuntu 16.04, PHP 7.x, node v4.6.1

Steps to reproduce (*)

1. set Magento in developer mode
2. in the backend set css generation in "server side compilation"

While developing a custom template i found some differences between my local dev site (inside a vagrant box) and our staging server. Some css rules in the staging server are not applied, while in my dev box they work as expected. In my local environment i use grunt while in our staging server we use server side compilation.
The produced css files are different, the order in which css rules are processed is different!

So today i made some tests with a clean M2 installations and Luma theme.

Server Side compilation	Grunt	Diff
styles-m.css	styles-m.css	diff*
styles-l.css	styles-l.css	diff*

*on the left side of the diff you have the server side compiled css

Expected result (*)

No diff

Actual result (*)

As you can see styles-m.css is ok, there are no breaking differences between the two versions.
Sadly the two versions of styles-l.css are not equivalent, the order of the css rules in the two files is different and this can produce a different result.

[hostep]

If you are able to install and use nodejs on your production server, you can use our module, which uses less.js to compile less files on the server instead of the less.php library (which indeed produces slightly different results).

[slackerzz]

thank you @hostep, i'll try your module

[slackerzz]

@hostep your module works well
However this is a major flaw in the official frontend dev workflow

[tkacheva]

@slackerzz Thanks for reporting that. Internal issue MAGETWO-60689

[slackerzz]

any news here?

[orlangur]

This is expectable by itself since client-side and server-side preprocessing use different library versions.

Providing a reproducible narrowed use case (some visual bug) would simplify investigation.

[magento-engcom-team]

@slackerzz, thank you for your report.
We've created internal ticket(s) MAGETWO-60689 to track progress on the issue.

[joshdavenport]

Am I living in a bubble or is nobody else other than those already partaking in this issue experiencing this?

I have what seems to be a reproducable case, and am happy to pass on some details if anybody is open to working on this.

[orlangur]

Hi @joshdavenport, of course providing a simple test case will simplify the investigation to whoever will work on this.

Note that

This is expectable by itself since client-side and server-side preprocessing use different library versions.

Magento is not doing LESS compilation by itself, in case of bug most likely we will have to patch lessphp library.

[joshdavenport]

Before proceeding here, I've actually discovered that the different results for me between LESS complied via grunt and "server side compilation" was eliminated by downgrading grunt-contrib-less from 1.4.1 (which is using less 2.7.1) to 0.12.0 (which is using less 1.7.2). I think @hostep may have discovered this (based on the comments in their module referenced earlier). grunt-contrib-less is specified as 1.4.1 in the provided package.json.sample so it's fair to assume others using the grunt workflow have a real possibility of stumbling into this issue.

Is it worth me reporting this separately?

[hostep]

@joshdavenport : please do so. This happend when upgrading from Magento 2.1 to 2.2, the nodejs dependencies got updated and now less 2.x is getting installed even though the PHP library to compile less is only compatible with less 1.x

I've reported this through some other channel a long time ago, can't remember when or how, but I failed at reporting it here on github. So please, go ahead and open a new issue.

[magento-engcom-team]

✅ Confirmed by @engcom-Charlie
Thank you for verifying the issue. Based on the provided information internal tickets MC-22208 were created

Issue Available: @engcom-Charlie, You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself.

[Aquive]

Is this fixed? I think dev compilation should be the same result as what is produced in production mode no matter which tool. We shouldn't be saying things like "it works on my machine". Work on dev with grunt, deploy to production and just see same result...

[engcom-November]

As this is quite a old issue, we verified this issue on latest 2.4-develop branch and the issue is not reproducible, it's been fixed.

Made the css generation to server side compilation and enabled developer mode.

There were no difference in grunt and server side compilation:
styles-m.css

styles-l.css

Thank you.

[hostep]

@engcom-November: I'm sure you executed your testing incorrectly.

I do still see differences, but the situation has improved a lot since the issue got reported, mostly due to the wikimedia/less.php composer package to be at version 5 (not released yet, is planned for Magento 2.4.8), which is compatible with less.js v3. The difference can be explained because grunt uses less.js v4 since Magento 2.4.7, so differences are still to be expected.
If we want to eliminate differences, we either need to wait until wikimedia/less.php comes out with another update to get it in line with less.js v4, or we need to downgrade less.js v4 back to v3 for grunt compilation.
But not sure if that is all needed, I would only do this if somebody comes up with a true example of what has a completely different result on the frontend between grunt & the less.php library.

Anyway, proper steps to reproduce:

1. Have a fresh clean and working Magento 2.4-develop instance
2. cp package.json.sample package.json
3. cp Gruntfile.js.sample Gruntfile.js
4. npm install
5. bin/magento setup:upgrade (to clear all generated files)
6. grunt clean:luma && grunt exec:luma && grunt less:luma
7. cp -r pub/static /tmp/magento-static-grunt
8. bin/magento setup:upgrade (to clear all generated files)
9. bin/magento setup:static-content:deploy -f --no-parent --theme Magento/luma en_US
10. diff -u /tmp/magento-static-grunt/frontend/Magento/luma/en_US/css/styles-l.css pub/static/frontend/Magento/luma/en_US/css/styles-l.css
11. diff -u /tmp/magento-static-grunt/frontend/Magento/luma/en_US/css/styles-m.css pub/static/frontend/Magento/luma/en_US/css/styles-m.css

The diff in styles-l.css is very minor:

--- /tmp/magento-static-grunt/frontend/Magento/luma/en_US/css/styles-l.css	2024-10-23 22:40:09
+++ pub/static/frontend/Magento/luma/en_US/css/styles-l.css	2024-10-23 22:41:09
@@ -2112,7 +2112,7 @@
     font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 14px;
     height: 32px;
-    line-height: 1.428571429;
+    line-height: 1.42857143;
     padding: 0 9px;
     vertical-align: baseline;
     width: 100%;
\ No newline at end of file
@@ -3175,4 +3175,3 @@
     margin-left: 85px;
   }
 }
-/*# sourceMappingURL=styles-l.css.map */
\ No newline at end of file

The one in styles-m.css is much bigger, so I'm no going to post it here.