Broken unicode symbol after minification

[tandu]

smile:before {
  content: "\200B";
}

Is compressed to

smile:before {
  content: "200B";
}

mgechev/angular-seed#390

[shmuelie]

Using what minifier?

[tandu]

As @mgechev says "The combination of ng2-inline-templates & typescript breaks the CSS.".

[tandu]

Check our discussion here mgechev/angular-seed#390

[blakeembrey]

@tandu Have you tried using two backslashes? It's in a string, so you need to escape the backslash to use it.

Edit: To be clear, I don't know Angular. Just going off the inline template comment (mgechev/angular-seed#390 (comment)) which is using a string, hence the backslash needs to be escaped.

[tandu]

In that case css for angular2-seed in dev mode works incorrectly. I.e. dev and prod modes handle this css rule differently.

[tandu]

Here is zipped application that introduces the issue https://github.com/mgechev/angular2-seed/files/92926/angular2-seed.zip

[blakeembrey]

@tandu I can't comment on Angular-specifics, but if this is inside a JavaScript string, it needs two backslashes to be in the output. The fact that it sounds like it works in dev is the bug to me.

[tandu]

In dev css is not minified I think this is the difference. In css unicode symbol should be defined using one slash, check here, for example: http://stackoverflow.com/questions/10393462/placing-unicode-character-in-css-content-value so it looks like a bug that minifier requires 2 backslashes.

[blakeembrey]

if this is inside a JavaScript string, it needs two backslashes to be in the output

@tandu No, it's not. You're writing JavaScript, not CSS (well, it's CSS inside of a JavaScript string) - so you need to escape the backslash in a JavaScript string, it's just how JavaScript works. I don't know how it's even working in dev, since it shouldn't.

You might want to read up on strings in JavaScript, if you're interested. But a backslash is an escape character. To have a backslash in the output, you need a backslash to escape another backslash - two backslashes.

[blakeembrey]

@tandu I just downloaded your zip - is it in the CSS file? TypeScript isn't the right place for the issue on CSS. As for the comment by @mgechev, I believe his example was wrong because it would need two backslashes.

[tandu]

I understand how escaping in strings is working. But if you are provided a real css to be minified either minifier should respect its single backslashes or css string should be parsed by regexp to replace single backslashes to double once.

[tandu]

In example cd to dist/prod and run test server from here: python -m SimpleHTTPServer then open it at localhost:8000 in browser.

[tandu]

To run it in dev you need to do some steps:

npm install tsd -g
npm install
npm start

[blakeembrey]

@tandu It's not a TypeScript bug if it's in CSS. You should log the issue in the minifier repo you've mentioned.

[tandu]

Yes, I think you are right, I will talk with them.

[blakeembrey]

@tandu Looks like it's caused in https://github.com/ludohenin/gulp-inline-ng2-template/blob/master/parser.js#L164-L167, they are just printing the backslashes back into JS without any additional escaping. They need to replace every backslash with two backslashes.

[vladima]

as I understand originally it appear when \200B had appeared in string template?

@Component({
  template: '',
  styles: [`
    smile:before {
      content: "\200B";
    }
  `]
})
class SampleComponent {}

if yes then from my reading of the ES6 spec seem that \2 is illegal sequence of characters for string templates so TypeScript compiler should show an error

TemplateCharacter

TemplateCharacter::
$[lookahead ≠ {]
\EscapeSequence
LineContinuation
LineTerminatorSequence
SourceCharacterbut not one of ` or \ or $ or LineTerminator

EscapeSequence

EscapeSequence::
CharacterEscapeSequence
0[lookahead ∉ DecimalDigit]
HexEscapeSequence
UnicodeEscapeSequence

CharacterEscapeSequence

CharacterEscapeSequence::
SingleEscapeCharacter
NonEscapeCharacter

SingleEscapeCharacter::one of
'"\bfnrtv

NonEscapeCharacter::
SourceCharacter but not one of EscapeCharacter or LineTerminator

EscapeCharacter::
SingleEscapeCharacter
DecimalDigit
x
u

[tandu]

Hm, I forgot about this http://www.typescriptlang.org/Playground#src=%40Component%28{%0A%20%20template%3A%20%27%27%2C%0A%20%20styles%3A%20[%60%0A%20%20%20%20smile%3Abefore%20{%0A%20%20%20%20%20%20content%3A%20%22\200B%22%3B%0A%20%20%20%20}%0A%20%20%60]%0A}%29%0Aclass%20SampleComponent%20{} It seems that is tsc issue after all.

[tandu]

Or as you said gulp-inline-ng2-template should replace single backslashes by two.

[blakeembrey]

Yes. Sounds like TypeScript could give a compiler error on the escape sequence, and that'll make the issue more obvious to consumers. Need to make sure gulp-inline-ng2-template is treating the strings correctly when putting it inline (E.g. backslashes, new lines, etc.)

[DanielRosenwasser]

@vladima is correct. I think #396 is either strongly related, or this is a duplicate of it. Either way, the fix for this should fix #396 as well.

[mhegazy]

This looks fixed in latest.