Symbolset font content incorrectly escaped

[JoakimLofgren]

I use the symbolset ss-pika in several projects and when trying to use webpack with the css-loader the resulting CSS string breaks and I end up with two scrambled characters (��) instead of my search icon (🔎).

This happens when you have UTF-16 characters like 🔎 (escapes properly to \1F50E) which becomes a surrogate pair when trying to escape it in Javascript.

I've been attempting to fix this using the cssesc module:

var cssesc = require("cssesc");

function escape(str, stringType) {
    return cssesc(str, {
        quotes: stringType === "'" ? "single" : "double"
    });
}

The tests break though, cause assert.deepAssert creates a surrogate pair when comparing the parseValues result of the file test-cases-values.js.

However, if I rollback css-loader to 0.14.5 (webpack-contrib/css-loader@51e11f3) then this is no longer an issue as the CSS isn't escaped.

Not escaping the content might be a more sane option?

Related reading:
https://mathiasbynens.be/notes/javascript-encoding
https://mathiasbynens.be/notes/css-escapes

[geelen]

Gonna ping @sokra on this one. I know we wanted to escape special characters in CSS class names, so hopefully we can do that without breaking multi-byte unicode chars too. Thanks for bringing this up & providing so much detail 👍