Imports should be hoisted to the top

[nsaunders]

Currently imports are not hoisted to the top of the CSS file. Instead, they are sorted down or remain nested (e.g. within media queries).

However, according to MDN, imported rules must precede all other types of rules, except @charset rules; as [@import] is not a nested statement it cannot be used inside conditional-group at-rules.

I propose that we follow the example of sass (see below) and hoist imports to the top. Perhaps in the future we could also accumulate queries in the process since they can be applied to @import statements directly.

Examples

purescript-css

in

query screen (singleton $ maxWidth nil) $
  star & byClass "foo" ? do
    importUrl "https://bomb.com/foo.css"
    color black

out

@media screen and (max-width: 0) { .foo { color: hsl(0.0, 0.0%, 0.0%) }
@import url(https://bomb.com/foo.css);
 }

sass

in

@media screen and (max-width: 0px) {
  .foo {
      @import "https://bomb.com/foo.css";
      color: black;
  }
}

out

@import "https://bomb.com/foo.css";
@media screen and (max-width: 0px) {
  .foo {
    color: black;
  }
}