Inlining CSS from @import doesn't strip @charset

[ianlewis]

When inlining css files included by an @import, the @charset declaration at the top of the imported css file are not stripped out before it is included.

So the final file is something like this:

@charset "utf-8";
. some-style {
    font-size: 12px;
}

@charset "utf-8";
.other-style {
    font-size: 10px;
}

It seems like the @charset should be stripped from the output file. Are there any problems with that? Is there a good way to end up with the correct end result?

[ianlewis]

This seems to answer my question. Is this right?

http://stackoverflow.com/questions/6422390/importing-css-with-import-in-conjunction-with-charset

Is it correct to set the charset in the main file and leave it out of the imported files bucause the charset in main.css should applies to imported stylesheets as well?

main.css

@charset "utf-8";
@import url("spam.css");
@import url("eggs.css");

[Shepard]

I'm affected by this as well. We have to add @charset statements to all our files to get our IDE to recognise the encoding properly and the optimizer doesn't strip them when they appear repeatedly.
This doesn't seem to cause any problems in browsers yet but it'd still be good to end up with valid CSS just to be on the safe side.

[ianlewis]

You can run sed as part of you build step to remove the @charset lines but you may have to make sure all your css files end with newlines or you may run into problems. 😖

sed -e 's/^@charset .*$//g'

[jrburke]

The CSS minifications in r.js are pretty basic, and there are a bunch of rules like this one that it does not understand.

In the future, I would likely break the CSS minification out into another tool, as I do not want to have to put the burden on r.js to carry all of that weight.

So putting this in the 3.0 bucket, mostly as a reminder to separate out the CSS stuff to another tool, maybe even suggest other tools if they are more robust.