CSS encapsulation breaks classes with escaped : colon in name

[jinsupark]

🐞 bug report

Affected Package

Not sure sorry..

Is this a regression?

Not sure sorry..

Description

When inside custom.component.scss, css encapsulation with auto-assigned angular data-attribute does not works as intended when the escaped character includes a colon.

REPRODUCTION

// this works even with css encapsulation
.custom\/red {
    padding: 20px;
    background: red;
}
// this will produce the class .custom/red[_ngcontent-sno-c1]

// however this doesn't work
.custom\:blue {
    padding: 20px;
    background: blue;
}
// this produces the class .custom[_ngcontent-sno-c1]:blue

WHAT IS EXPECTED

.custom\/red[_ngcontent-sno-c1] {
    padding: 20px;
    background: red;
}

.custom\:blue[_ngcontent-sno-c1] {
    padding: 20px;
    background: blue;
}

WHAT IS RETURNED

.custom\/red[_ngcontent-sno-c1] {
    padding: 20px;
    background: red;
}

.custom\[_ngcontent-sno-c1]:blue {
    padding: 20px;
    background: blue;
}

As you can see the data-attribute that is assigned shifts in between the backslash and the colon which makes this class unusable.

WORKAROUND

Workaround to solve this is to turn off css encapsulation.

🌍 Your Environment

Angular 7

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}