Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
slackerzz opened this issue Oct 28, 2016 · 54 comments · Fixed by #31793
Closed

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

slackerzz opened this issue Oct 28, 2016 · 54 comments · Fixed by #31793
Labels
Area: Frontend Component: Css Issue: Confirmed Gate 3 Passed. Manual verification of the issue completed. Issue is confirmed Priority: P2 A defect with this priority could have functionality issues which are not to expectations. Progress: done Reproduced on 2.3.x The issue has been reproduced on latest 2.3 release Severity: S2 Major restrictions or short-term circumventions are required until a fix is available. Triage: Dev.Experience Issue related to Developer Experience and needs help with Triage to Confirm or Reject it

Comments

@slackerzz
Copy link
Member

slackerzz commented Oct 28, 2016

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
Copy link
Contributor

hostep commented Oct 28, 2016

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
Copy link
Member Author

thank you @hostep, i'll try your module

@slackerzz
Copy link
Member Author

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

@tkacheva
Copy link

tkacheva commented Nov 8, 2016

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

@tkacheva tkacheva self-assigned this Nov 8, 2016
@tkacheva tkacheva added the Issue: Ready for Work Gate 4. Acknowledged. Issue is added to backlog and ready for development label Nov 8, 2016
@slackerzz
Copy link
Member Author

any news here?

@orlangur
Copy link
Contributor

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 magento-engcom-team added 2.1.x Issue: Ready for Work Gate 4. Acknowledged. Issue is added to backlog and ready for development bug report Area: Frontend Issue: Format is not valid Gate 1 Failed. Automatic verification of issue format is failed labels Sep 11, 2017
@magento-engcom-team magento-engcom-team added Issue: Clear Description Gate 2 Passed. Manual verification of the issue description passed Issue: Confirmed Gate 3 Passed. Manual verification of the issue completed. Issue is confirmed Reproduced on 2.1.x The issue has been reproduced on latest 2.1 release labels Oct 26, 2017
@magento-engcom-team
Copy link
Contributor

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

@magento-engcom-team magento-engcom-team added the Event: distributed-cd Distributed Contribution Day label Mar 19, 2018
@magento-engcom-team magento-engcom-team removed the Event: distributed-cd Distributed Contribution Day label Apr 14, 2018
@joshdavenport
Copy link

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
Copy link
Contributor

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
Copy link

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
Copy link
Contributor

hostep commented Jun 28, 2018

@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
Copy link
Contributor

✅ 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.

@ghost ghost removed Issue: Clear Description Gate 2 Passed. Manual verification of the issue description passed Issue: Format is valid Gate 1 Passed. Automatic verification of issue format passed Issue: Ready for Work Gate 4. Acknowledged. Issue is added to backlog and ready for development labels Oct 20, 2020
@sdzhepa sdzhepa added the Triage: Dev.Experience Issue related to Developer Experience and needs help with Triage to Confirm or Reject it label Nov 4, 2020
@magento-engcom-team magento-engcom-team added Priority: P2 A defect with this priority could have functionality issues which are not to expectations. Severity: S2 Major restrictions or short-term circumventions are required until a fix is available. labels Nov 30, 2020
@Aquive
Copy link

Aquive commented Jun 17, 2021

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
Copy link
Contributor

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
image

styles-l.css
image

Thank you.

@hostep
Copy link
Contributor

hostep commented Oct 23, 2024

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Frontend Component: Css Issue: Confirmed Gate 3 Passed. Manual verification of the issue completed. Issue is confirmed Priority: P2 A defect with this priority could have functionality issues which are not to expectations. Progress: done Reproduced on 2.3.x The issue has been reproduced on latest 2.3 release Severity: S2 Major restrictions or short-term circumventions are required until a fix is available. Triage: Dev.Experience Issue related to Developer Experience and needs help with Triage to Confirm or Reject it
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.