CSS file imports compiled in wrong order

[renestalder]

What my SCSS file looks like

/*!
Theme URI: http://mywebsite.com
Description: my theme description
Author: whatwedo GmbH
Template: Meola
Version: 0.1
*/

// Parent Theme
@import url("../meola/style.css");

// Thirt Party Components
@import '../../bower_components/bourbon/dist/bourbon';

...

What the compiled CSS output looks like

@import url("../meola/style.css");
/*!
Theme URI: http://mywebsite.com
Description: my theme description
Author: whatwedo GmbH
Template: Meola
Version: 0.1
*/
body {
  font-family: 'Ek Mukta', 'Helvetica Neue', 'Helvetica', sans-serif;
  font-weight: 300; }

a, .entry-header h2.entry-title a:hover, .widget-area .widget_meola_recentposts h3.entry-title a:hover, .widget-area .widget_twitter h3.widget-title a:hover {
  color: #0699a6; }

...

The regular CSS import should be bellow the code comment.

In addition, It seems like in compressed mode, instead of the import statement I get the code of the source file. Is this the wanted behaviour?

[HamptonMakes]

That's definitely weird. I guess we coded the import to float to the top?
Here is a simpler test case:
http://sassmeister.com/gist/1f4393195c3175b71aae

[GDmac]

in css "The @import CSS at-rule allows to import style rules from other style sheets.
_These rules must precede all other types of rules_, except @charset rules"
https://developer.mozilla.org/en-US/docs/Web/CSS/@import

[renestalder]

@GDmac IMHO with "these rules must precede all other types of rules..." the at-rules are meant, but not selectors. Correct me If I'm wrong.

[HamptonMakes]

It doesn't really matter... Sass 3.4 keeps import below the comment, so we should too. There's very rarely an accident over on the main Sass project. ;)

[GDmac]

@renestalder if i look at the css 2.1 spec, it is 'illegal' after ANY other rule.
http://www.w3.org/TR/CSS2/syndata.html#at-rules

edit: so, after a comment is not a problem, but it is something to keep in mind.
@hcatlin 👍

[malrase]

https://github.com/sass/sass-spec/tree/master/spec/libsass-todo-issues/issue_469

This now has a test, so the label "needs test" should be removed.

[lmartins]

Also having this issue with what I believe is the current version.

I currently have a file with a bunch of settings:

@import "_settings.scss";

When I try to split that file in multiple imports:

@import "settings/_typography.scss";
@import "settings/_colors.scss";
@import "settings/_colors.scss";
@import "settings/_bourbon.scss";
@import "settings/_typography.scss";
@import "settings/_components.scss";

I then start to get a lot of error such as:

[20:04:33] Plumber found unhandled error:
 Error in plugin 'gulp-sass'
Message:
    /Users/luismartins/Sites/00_LAB/wp-multisite/wp-content/themes/wip-foster/src/sass/base/_typography.scss:31: unbound variable $box-spacing-small

Note that the files where those variables are being requested are imported after the settings mentioned above. Not sure what's going on, but this didn't happened with prior versions of libsass.

[mgreter]

This issue should (hopefully) be addressed/fixed by #792.
Please try with latest master and open a new issue if the problem still exists.
Thank you!

[xzyfer]

@mgreter you can activate the spec for this now! Nice work https://github.com/sass/sass-spec/blob/master/spec/libsass-todo-issues/issue_469