Incorrect @import order

[kennethjor]

I noticed what appears to be a bug in the import order between .css and .less files.
Suppose I have the following three files:

main.less:

@import url("first.less");
@import url("second.css");
@import url("third.less");

first.less:

.first {
  color: #000;
}

second.css:

.second {
  color: #111;
}

third.less:

.third {
  color: #222;
}

Executing lessc main.less produces the following result:

@import url("second.css");
.first {
  color: #000;
}
.third {
  color: #222;
}

The import of second.css is placed above the parsed content of first.less, which had its original import statement placed before the second one.

Unless I'm overlooking something, the expected result would be:

.first {
  color: #000;
}
@import url("second.css");
.third {
  color: #222;
}

[matthew-dean]

No, I don't believe you are correct.

In LESS, @import statements can happen wherever, because it is actually parsing and inserting when it comes across the statement. But @imports to CSS, by necessity have behave differently because the statement will be preserved. Why? Because CSS imports MUST appear at the top of the document, even before comments. I couldn't find supporting documentation in the W3C spec, but that is stated clearly on other blogs about @import. It may mean, then, that this is a requirement for a particular browser and has become a required convention.

For example, this site says the same: http://www.cssnewbie.com/css-import-rule/
"Your @imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the @import tag will cause your imports to fail. So be sure to do your imports before you do anything else."

My question is: Why use a CSS? If you simply change the extension to second.less, you won't have an issue.

[kennethjor]

Valid points.

I used the .css extension because I was curious how the compiler would behave. We're considering replacing all our current css with less. Since it's a rather large application, we would like to convert a few at a time. Using the .css extension would allow us to keep track of which ones have been converted or not. Anyway, there are other ways of doing that.

In reading my original post over again, the expected result I posted wasn't correct. Thinking about it, I would expect this instead:

.first {
  color: #000;
}
.second {
  color: #111;
}
.third {
  color: #222;
}

[lmeurs]

In my opionion @kennethjor is right, I think it would be logical to implement css files that are imported in a less file, instead of the css file being imported at the top of the by less.js generated css file.

We cannot change the extension of the file, since the css file is shared with another platform (WYSIWYG editor) that does not know how to cope with .less files.

In our situation we can load the css file seperately after the rest is loaded, but I can imagine that in some situations one might want to load the css file in the middle of less files, like kennethjor stated.

[SomMeri]

Supporting documentation for "CSS imports MUST appear at the top of the document":

• CSS3 http://www.w3.org/TR/css3-cascade/#at-import "Any ‘@import’ rules must follow all ‘@charset’ rules and precede all other at-rules and rule sets in a style sheet."
• CSS2.1 http://www.w3.org/TR/CSS21/cascade.html#at-import "Any @import rules must precede all other rules (except the @charset rule, if present)."

[matthew-dean]

LESS should not output an @import url("second.css") in the middle of the file. I understand what you're attempting, in only changing a portion of your files, but it's not possible because of the restrictions of CSS. Probably what you would need is, in some cases, for the parser to interpret that second file as LESS, which is a separate discussion from CSS @import placement. (Such as Issue #560)