@charset "UTF-8"; not lifted to the top of the css file when @import url() used

[SLKnutson]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Maybe.

Description

@charset "UTF-8"; not lifted to the top of the css file when @import url() used. Instead, all the @import url()s are listed first.

As far as how this affects the user, it seems like chrome is still able to figure things out, most of the time. One way to force it to mess up due to this is to load the app, open dev tools, and then reload the app. That is probably a separate chrome bug.

🔬 Minimal Reproduction

Here is a repo that exhibits the problem. Note the second commit that changes 2 files to make this happen:
https://github.com/SLKnutson/angular-bug
Run ng build --configuration="production" and then look at the dist/styles.css file.
Charset needs to be the first line in the file, but it is not.

🌍 Your Environment

Found in mac and linux, haven't tried Windows

Anything else relevant?
If node-sass is used, this problem doesn't occur because node-sass doesn't change the '\f103' into a unicode character, and so no @charset "UTF-8"; is needed.

When optimization=true in angular.json, the error is fixed.

I've done a little bit of digging, the css looks good coming out of the actual sass compiler, but gets messed up somewhere after that.

Thanks!

[alan-agius4]

I'm sorry, but this issue is not caused by Angular CLI. Please contact the author(s) of the css-loader project or file an issue on their issue tracker.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}