Emojis in CSS broken since 2.0.0

[chrisEff]

• Operating System: macOS 10.14.2 (Mojave)
• Node Version: 10.14.2 (yes! it's by coincidence actually the same as the OS version 😄)
• NPM Version: 6.5.0
• webpack Version: 4.28.2
• css-loader Version: 2.0.0, 2.0.1, 2.1.0

Expected Behavior

In my CSS I have a section with a :before selector and a content property. The content property contains a light bulb emoji. With css-loader 1.01 the emoji is converted into \1F4A1, which Chrome then in turn nicely renders as a lightbulb.

Actual Behavior

With every version since 2.0.0 the emoji becomes �, which does not get rendered as an emoji.

Code

.light.on .bulb:before{
	content: '💡';
}

require('style-loader!css-loader!./style.css')

How Do We Reproduce?

Use an emoji in a CSS content property and require the CSS file via css-loader + style-loader, like shown in the code snippets above. My webpack config doesn't contain anything that seems relevant for this.

[alexander-akait]

@chrisEff we have tests on emoji and all work fine, please create minimum reproducible test repo

[alexander-akait]

Tests #881 and you can see emoji are not broken

[chrisEff]

Here you go:
https://github.com/chrisEff/css-loader-emoji-bug
Run npm i and npx webpack and then open the public/index.html file in a browser.
You will see some strange characters in front of "Test".

But if you change the css-loader version in package.json to 1.0.1 and do the same steps again, you'll see a nicely rendered light bulb.

[alexander-akait]

@chrisEff weird, confirmed, investigate

[alexander-akait]

@chrisEff no, it is not bug in css-loader. You need add <meta charset="utf-8"> to fix it.

TL;DR

Without <meta charset="utf-8"> you page interpreted based on characters in document (for me it is windows-1252), you can check this run document.charset in console so emojis was broken. More information about this https://linuxwebdevelopment.com/how-to-insert-emojis-in-html/ , you can find your bug in step 0, thanks for issue

[chrisEff]

A big THANK YOU for investigating and coming up with with a solution so quickly! 👍

But still: If this is the problem, why did it work then with the old css-loader?

[alexander-akait]

@chrisEff old css-loader transform all unicode characters in \uXXXX so all work good, but it is invalid behavior because we can't rely on what all developers use utf-8, also in previous version unicode pairs was broken due this transformation and we remove this behavior. We don't write this in CHANGELOG because nobody rise issue before you and it is good practice setup meta with charset.