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.