Css-loader: utf-8 characters support?

[reverland]

I try to use css-loader to load this file

body {
  font-family: '微软雅黑'; /* some chinese font name */
}

but get this

    exports.push([module.id, "@charset 'UTF-8';\nbody {\n  font-family: '\\5FAE\\8F6F\\96C5\\9ED1';\n}\n", ""]);

It looks like the font name is transformed into something else.

follow the way i found stringfyValues which will stringify the utf-8 character...

https://github.com/css-modules/css-selector-tokenizer/blob/master/lib/stringifyValues.js

what the declaration value is stringified for? Is there any way to use non ascii font name with css-loader?

[imingyu]

font-family:Microsoft Yahei

[japboy]

Please support non-ascii characters in css-loader 👍

[swcho]

For me, this problem seems hard to solve at a first glance as unicode escaping done by postcss module.

Until proper solution applied, I would use interim solution by using hacky loader which unescape unicode.
https://github.com/swcho/font-family-unescape-loader

You can place "font-family-unescape-loader" right before "css-loader" then the loader will change font names of font-family config.

[alexander-akait]

WIP

[alexander-akait]

oh, two problems:

1. postcss-modules-local-by-default change 微软雅黑 to \5FAE\8F6F\96C5\9ED1.
2. css-loader on line https://github.com/webpack-contrib/css-loader/blob/master/lib/processCss.js#L129 also change 微软雅黑 to \5FAE\8F6F\96C5\9ED1.

First try to fix in css-loader, then in postcss-modules-local-by-default

[alexander-akait]

/cc @michael-ciniawsky we can marked this as bug, i try to resolve this in near future, but very little time i have :sob:

[alexander-akait]

Close in favor https://github.com/webpack-contrib/css-loader/issues/578