CSS @imports are not the first rule in the css output file

[Guichaguri]

🐛 bug report

The @import rule is supposed to be the first rule in a CSS file. When two css files are combined, the @import rule is kept in the import order and not moved to the start of the file.

From the official specs (present since CSS2):

Any @import rules must precede all other valid at-rules and style rules in a style sheet (ignoring @charset), or else the @import rule is invalid.

https://drafts.csswg.org/css-cascade-4/#at-ruledef-import

🎛 Configuration (.babelrc, package.json, cli command)

import 'style.css'
import 'another.css'

/* style.css */
body {
    ...
}

/* another.css */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

div {
    ...
}

🤔 Expected Behavior

/* output css file */

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

body {
    ...
}

div {
    ...
}

😯 Current Behavior

/* output css file */

body {
    ...
}

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

div {
    ...
}

💁 Possible Solution

The @import rules should be detected and, either moved to the start of the file or splitted into its own file.

🔦 Context

Each component of my app contains its own css file, by changing the order the components are loaded, the @import rule might not be the first rule in the final css file, meaning it won't work at all.

I used to build the same codebase using Webpack which worked well with weirdly-ordered css imports, this is the only issue I've seen after moving over to Parcel.

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-beta.1 (I've also seen the issue in v1)
Node	13.5.0
npm/Yarn	Yarn 1.21.1
Operating System	Windows 10 x64