Wrong behavior with multiple escaped characters

[alexander-akait]

Input:

.class { content: "\F10C \F10D" }

Output:

.class { content: "\F10C  \F10D" } /* Two space between escaped characters */

[mathiasbynens]

Why are you feeding already escaped input to cssesc? What output are you expecting?

Please provide a reproduction case in JS.

[alexander-akait]

@mathiasbynens

const cssesc = require('cssesc');

console.log(cssesc('😀 😀'));

Output:

\1F600  \1F600

Two space between, but in source one.

[mathiasbynens]

Your input has one space already:

const cssesc = require('cssesc');
cssesc('\u{1F600} \u{1F600}');

The additional space following \1F600 in the output is consumed as part of the first escape sequence. https://mathiasbynens.be/notes/css-escapes#trailing-whitespace

The input from your original post:

.class { content: "\F10C \F10D" }

…decodes to '\u{1F600}\u{1F600}', which is a different string (note the missing space between the emoji).

[alexander-akait]

@mathiasbynens I'm not really sure then who is responsible for the problem, css-loader use css-selector-tokenizer for some node types and change their content, but css-selector-tokenizer use cssesc for escaping string https://github.com/css-modules/css-selector-tokenizer/blob/d315d8d2a77cab97d90dcac5ee9f36c1d7688245/lib/stringifyValues.js#L27

[alexander-akait]

And we give some incorrect behavior with escaped characters, example above #10 (comment)

[alexander-akait]

@mathiasbynens also you example contain two spaces in output

const cssesc = require('cssesc');
console.log(cssesc('\u{1F600} \u{1F600}'));

\1F600  \1F600

We do not need two spaces right?

[mathiasbynens]

@evilebottnawi Exactly, and the rest of my comment explains why that’s okay. Check out the link I posted for more info.

[mathiasbynens]

@evilebottnawi It seems like there is some kind of bug in one of the projects you mentioned — they shouldn’t escape already-escaped data. Are there open bug tickets I could look at?

[alexander-akait]

@mathiasbynens I have not seen them, we are preparing to release a stable version css-loader and i accidentally stumbled upon this error, PR in css-loader webpack-contrib/css-loader#493 and line https://github.com/evilebottnawi/css-loader/blob/094b60bdd47473e51a171b7e691c45e53db604c4/test/simpleTest.js#L29. Just uncomment line and run test npm run test

[alexander-akait]

But seems problems here https://github.com/css-modules/css-selector-tokenizer/blob/master/lib/stringifyValues.js#L27