Comments and "@import must precede all other statements"

[Dylan-Chapman]

This CSS:

@import "helpers";


/* ============================================================================
   BASE STYLING
   ============================================================================ */

@import "base/reset";

@import "base/typography";
...

Produces this error (for the second @import statement):

@import must precede all other statements (besides @charset)

This is kicked because of the comment. This shouldn't be the case though, should it?

[TrySound]

Thanks for your report. Will fix asap

[TrySound]

@Dylan-Chapman Use please postcss-import@7 until fix.

[Dylan-Chapman]

Will do. Appreciate it!

[MoOx]

8.0.2 released

[Paulmicha]

Something doesn't seem right : before, when using https://github.com/MoOx/gulp-cssnext, I could use @custom-media statements before the first @import, ex :

@charset "UTF-8";
@custom-media --wide (min-width:81.25rem);
@import "sanitize.css";
@import "suitcss-components-flex-embed";
@import "./base/_typography.vars.css";
...

Now, it yields @import must precede all other statements (besides @charset) - BUT : only the first @import fails - all the others pass.

What is making this a blocking issue, though, is the fact that when I move all @custom-media statements after the first import, I get errors like variable '--line-height' is undefined and used without a fallback.

Current workaround : I'm forced to duplicate the first @import to get back on track.

[MoOx]

FYI, @custom-media --wide (min-width:81.25rem); can be defined after even if imported files use it. It's how CSS works.

[Paulmicha]

Good to know.

It doesn't explain, however, the rest of unrelated errors - the undefined variables - when I had moved these declarations after the first @import (and left a few after), which seemed to indicate a much more worrying issue - that the order of inclusion could not be guaranteed.

But, after moving all @custom-media after the very last @import, no more errors \o/

Thanks for the feedback :)

[MoOx]

So your are good?

[Paulmicha]

Yes.

This error made me look into https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#nested_statements (from https://developer.mozilla.org/en/docs/Web/CSS/@import), which clarifies the existence of such a restriction in the position of these statements - in case anyone else was wondering.

[TayyabMirza]

Putting all imports at the beginning of the file, css below the imports fix this issue.