Magento2: Less.js Implementation Should Only Apply to Resources with a Less Source File

[astorm]

If a user enables client side Less compilation via less.js compilation via

System -> Stores -> Configuration -> Advanced -> Developer -> Front-end Developer Workflow 

Magento will render every CSS <link/> source with a rel="stylesheet/less"

<link  rel="stylesheet/less" ... src="/some/css/file.css" />

This tells less.js that this link needs to be processed. The static asset serving application (static.php) ensures that the source file /some/css/file.css will actually server the less source for this file. All this is normal function of client side less processing is on.

However, if a module or theme adds a CSS file that does not have a less source file, the link is still rendered with stylesheet/less

<link  rel="stylesheet/less" ... src="/some/css/file.css" />

However, without a less source file, the static.php script serves up the plain old CSS file. This CSS is then processed as less, which can break the layout. A plain CSS file is not guaranteed to go through the less compiler unchanged. For example, the following valid CSS

#foo
{
    background-position: calc(100% - 12px) -34px, 100%, calc(100% - 3.2rem) 0;
}

will be compiled by less into

#foo {
    background-position: calc(88%) -34px, 100%, calc(96.8%) 0;
}

which is a very different style. This is only one example of this -- a CSS file is simply not guaranteed to remain the same after being processed for less.

The rel="stylesheet/less" should only be added when there's an actual less file to serve.

This is not a theoretical concern. I've run into it when converting. some old Magento 1 modules into Magento 2's new format.

[astorm]

This also seems to cause problems with stock Magento CSS. If I enable client side less compliation in the backend, when the page reloads the configuration UI looks broken (see screen shot). This appears to be the result of the static asset serving application serving up CSS instead of less file.

[MomotenkoNatalia]

@astorm Thanks for reporting this issue! Internal ticket MAGETWO-49175

[astorm]

@MomotenkoNatalia pinging -- any update on the internal ticket here?

[andimov]

@astorm ticket MAGETWO-49175 resolved but still not published.

[BenSpace48]

@andimov Do you know when this will be released? It's a pretty annoying bug to work around.

[victorgugo]

Fix was published to main develop branch. Please, check

[astorm]

@victorgugo published where? Where are the tests?

[victorgugo]

@astorm, I mean code push. What tests do you need? Code changes were covered with unit tests

[astorm]

@victorgugo The tests that covered the changes needed to fix this issue.

[victorgugo]

@astorm sorry for misunderstanding. Tests were also delivered to main develop branch by DOD. Unit tests that reflected changes:

Magento/Developer/Test/Unit/Model/View/Asset/PreProcessor/FrontendCompilationTest.php
Magento/Developer/Test/Unit/Model/Config/Backend/WorkflowTypeTest.php
Magento/Developer/Test/Unit/Block/Adminhtml/System/Config/WorkflowTypeTest.php
Magento/Framework/App/Test/Unit/Config/ValueTest.php
Magento/Framework/View/Test/Unit/Page/Config/RendererTest.php

[astorm]

@victorgugo Thank you! What's DOD?

[BenSpace48]

@astorm According to the docs it's 'definition of done' - http://devdocs.magento.com/guides/v2.1/contributor-guide/contributing_dod.html

[astorm]

@BenSpace48 Thanks! That's the first time I'd heard the term.

/cc @piotrekkaminski w/r/t developer experience, seeing/knowing the "DoD" for a closed ticket would be super useful, and go a long way towards understanding how particular issues were solved.

[piotrekkaminski]

@astorm this is for contributors: http://devdocs.magento.com/guides/v2.1/contributor-guide/contributing_dod.html
The internal one is pretty much same just reviews are done within or across teams.

[astorm]

Thank @piotrekkaminski -- did you miss my questions/suggestion that the DoD artifacts (tests, etc.) should be shared when a ticket was closed? Or was no response a response :)

[piotrekkaminski]

@astorm oh i just misunderstood your question then. So you would like to get links to not only commit but also artifacts when task is closed?