@charset "UTF-8" moved below @import

[SLKnutson]

Previously opened an issue with angular, but I've isolated the issue to this library.
The incoming css looks like

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Raleway:400,500,600,700");
.force-unicode {
  content: "\f103"
}

but after passing through this plugin, the @import is listed above the @charset. @charset needs to be listed first to work.

Thanks!

[RyanZim]

I'm not understanding the issue here; the input css does not contain @charset at all, so where does the @charset come from?

[SLKnutson]

@RyanZim I messed up the markdown. Fixed now.

[RyanZim]

Oof, yeah, that's a bug; investigating...

[RyanZim]

PR with a failing test to replicate this bug: #438. I've made some progress tracking down why this happens, but still haven't figured out the right way to fix it. Feel free to take a stab at it yourself, BTW, otherwise, I'll keep working on this as I get time.

[SLKnutson]

There is probably no right answer on how to handle charset since you could theoretically find them anywhere in the root file, or imported files, but at the end of the day there needs to be at most one. Looks like all files that get @imported in get brought in as utf-8, but the root passed in css file contents could be any encoding, so it may not be safe to assume that everything could have @charset "UTF-8" slapped at the top.

[RyanZim]

OK, got a half-decent solution here: #447 Take a look, and let me know what you think.