Less files not adjusting relative paths of imported css files

[micktion]

I'm attempting to bundle a bunch of css together using a less file and Visual Studio 13 Web Essentials. v2.6.13 The source css files are in different folders. e.g.

@import (inline) "Telerik/Grid.css";
@import (inline) "Telerik/ListBox.css";
@import (inline) "Telerik/TabStrip.css";
@import (inline) "Telerik/ComboBox.css";
@import (inline) "Telerik/MultiPage.css";
@import (inline) "Telerik/Input.css";
@import (inline) "Telerik/Calendar.css";
@import (inline) "Telerik/Menu.css";
@import (inline) "Telerik/TreeView.css";
@import (inline) "Telerik/Default/Grid.Default.css";
@import (inline) "Telerik/Default/ListBox.Default.css";
@import (inline) "Telerik/Default/TabStrip.Default.css";
@import (inline) "Telerik/Default/ComboBox.Default.css";
@import (inline) "Telerik/Default/Input.Default.css";
@import (inline) "Telerik/Default/Calendar.Default.css";
@import (inline) "Telerik/Default/Menu.Default.css";
@import (inline) "Telerik/Default/TreeView.Default.css";
@import "Common.less";

The issue I'm finding is that less is importing the css files as is without changing URLs in the imported css. Relative URLs within the imported CSS files end up broken as they are relative to the location of the source CSS file, whereas the location of the bundled css is in a different folder.

e.g The following imported from Telerik/Grid.css...

RadGrid .rgBatchChanged {
    background-image: url('Common/Grid/dirty.png');

...needs to be...

RadGrid .rgBatchChanged {
    background-image: url('Telerik/Common/Grid/dirty.png');

... in the bundled css file.

I've attempted changing the Less settings in the WebEssentials-Settings.json, AdjustRelativePaths set to true or false seems to result in the same CSS. I've also tried changing the css files to less files, this also had no effect. The only solution I've got is to split the bundle into separate bundles for each folder, which is not optimal.

Can anyone offer a solution?

[rjgotten]

@import (inline) inlines the referenced file verbatim without any of the adjustments of a real import.
Ofcourse it wouldn't adjust paths.

[micktion]

What's the point of importing css (inline) if it doesn't adjust paths?

"Ofcourse it wouldn't adjust paths."

It doesn't seem obvious to me at all why it would import css verbatim without any adjustments to relative paths within the css, as the resulting css is broken.

[rjgotten]

What's the point of importing css (inline) if it doesn't adjust paths?

If you want to import CSS while adjusting paths, just use an @import without an option directive.
This will work because Less is a superset of CSS.

The point of @import (inline) is to be able to include content verbatim without processing either to speed up compilation or to avoid problems with new CSS syntax that the Less parser cannot handle yet or old and broken vendor-specific non-compliant CSS syntax that they will never support.

[micktion]

Omitting the (inline) results in import statements being emitted in the css, which is not the result I'm after. I'm trying to consolidate all the css files into a single file, omitting the (inline) doesn't achieve that.

Using (inline) achieves the result I'm after however I can only include css in the same folder as the less file, including css in any other directory will result broken paths in the imported css.

[rjgotten]

Omitting the (inline) results in import statements being emitted in the css, which is not the result I'm after. I'm trying to consolidate all the css files into a single file, omitting the (inline) doesn't achieve that.

My mistake: if the file in question has a .css extension, you need to force the compiler to treat it as Less: @import (less) "foo.css"

In all honesty though, you could've gotten all this from the manual.

[micktion]

I can't see anything in the manual that talks about how each directive treats relative paths.

But thanks, using the (less) directive does result in some success, the paths are adjusted to be relative from the importing less file.

I say some success as using the (less) directive resulted in a new issue - "media definitions require block statements" error...

e.g
"ParseError: media definitions require block statements after any features in \App_Themes\Telerik\ComboBox.css..."

I could get the web compiler to compile the less file successfully only after removing several of the css files imported with the (less) directive. So still no success.

[rjgotten]

I can't see anything in the manual that talks about how each directive treats relative paths.

Directives don't treat them differently. They're treated differently based on the -ru or --relativeUrls commandline switch. The big difference is in the fact that inline imports don't have any processing attached to them.

The boxed and emphasized line for the inline option in the manuals literally states:

Use @import (inline) to include external files, but not process them.

That means they won't have any alterations made and will be included verbatim.

---

"ParseError: media definitions require block statements after any features in \App_Themes\Telerik\ComboBox.css..."

That means Telerik's components are using unsupported at-directives. Possibly they are using a very bad IE9 detection hack based on media queries with multi-line comments sitting between the directive and its scope block.

[micktion]

Well thanks for your help.

I'd still argue there's a case for (inline) adjusting relative paths.

With the exception of the relative paths to static resources, including the css verbatim is obviously what I need.

I can't think of a case where the current behaviour is desired. i.e. that you would like to import css and NOT adjust relative paths within the imported css.