Different less compilation results between grunt and server side compilation

Question

I got the following theme inheritance setup: Vendor/Retail inherits from Vendor/Default which inherits from Magento/blank

When compiling the styles with grunt I get no issues. When compiling with server-side compilation some of the blank theme's styles are missing.

I.e. vendor/magento/theme-frontend-blank/Magento_CatalogSearch/web/css/source/_module.less or vendor/magento/theme-frontend-blank/web/css/source/_layout.less

Will be included when compiled with grunt but dropped when compiled with server-side compilation.

I'm drawing a bit of a blank here. Does anyone have an idea what's going on here?

Edit:

I dug into it more and found that it actually only drops the styles that are wrapped in media queries. The common styles are applied. So styles wrapped in:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m)

will be dropped and not show up in styles-l.css. While styles wrapped in:

& when (@media-common = true) {

will show up in styles-m.css.

This only applies to styles from the blank theme. Styles wrapped in media queries from the child theme are not affected by this issue.

Answer 1

I finally figured it out. In case someone else runs into the same problem I'll post the solution. The server side asset compilation doesn't support double quotes in the .media-width() mixin arguments.

I.e.:

.media-width(@extremum, @break) when (@extremum = "max") and (@break = @screen__m) {

will work fine when compiled with Grunt but not at all when using the server side asset compilation.

To make it work on both you need to use:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

Answer 2

Check the less "imports" in your custom themes. They all must match the pattern @import 'foo/_bar.less';

Pay attention at two things:

1. File path must be wrapped in single quotes ('), not in double quotes (")
2. File path must end with ".less"