@charset stripped in :compressed output

[mikefowler]

Yesterday I updated a project from 3.3 to 3.4 (specifically, 3.4.5), and it seems that @charset "utf-8"; is being stripped from files compiled using :compressed style. I do not believe this is the intended result.

Input

body {
  font-family: "漢字仮名交じり文", sans-serif;
}

Output (default)

sass input.scss output.css

@charset "UTF-8";
body {
  font-family: "漢字仮名交じり文", sans-serif; }

Output (compressed)

sass --style=compressed input.scss output.css

body{font-family:"漢字仮名交じり文", sans-serif}

[stephnr]

It could be that UTF-8 is the default charset and does not need to be declared.

[whaaaley]

@Stephn-R I did some research and it needs to be declared if you use non-english characters in your CSS and your HTML is encoded differently.

Here's a link about charsets if it helps anyone.
http://www.w3.org/International/questions/qa-css-charset.en.php

[nex3]

In compressed mode, Sass adds a UTF-8 byte-order mark rather than an explicit @charset declaration, since it's more compact. The decoding algorithm used by the CSS syntax spec mandates that this BOM be detected and handled correctly, and I believe browsers do so.

[mikefowler]

Thanks for clearing this up, @nex3! 👍

[kapooostin]

But it causes all kinds of trouble when you later try to inline styles, for example when compiling html for email. BOM gets inserted in the middle of resulting email. Some clients ignore it, but Apple Mail shows weird question marks.

[atflick]

One buggy thing that I found on my app, which may just be a Chrome issue, but if you right click > inspect an element, then close the dev tools and navigate to another page, my icon font in my CSS file no longer gets properly decoded:

should be:

Manually adding the @charset "utf-8"; in the compiled css file prevents that. Wish I could manually add this in my scss files, but it gets stripped.

Likely a Chrome issue, but still, don't want our QA team stumbling on this every so often

[ronilaukkarinen]

I don't see @charset "utf-8"; in any output. Any way to fix this?

[nex3]

@ronilaukkarinen It should be present in expanded output as long as you have a non-ASCII character anywhere in your stylesheet output. If it's not there, some other tool is probably stripping it out.