css attribute selector [title~="flower"] doesn't work with view encapsulation

[esagawe]

I'm submitting a ...

[x] bug report
[ ] feature request

Current behavior
I have the following code:

.foo[bar="baz"] {
    color: blue;
}

/* added a tilde an use another attribute value */
.foo[bar~="baz2"] {
    color: red;
}

<div class="foo" bar="baz">
    Test 1
</div>
<div class="foo" bar="baz baz2">
    Test 2
</div>

And Angular create this:

.foo[bar="baz"][_ngcontent-udm-1] {
    color: blue;
}

.foo[bar[_ngcontent-udm-1]~="baz2"][_ngcontent-udm-1] {
    color: red;
}

If I run the code the text color for "Test 1" turns blue and "Test 2" is still black. But if I change the code as followed within the Chrome debugger, "Test 2" will become red.

/* removed [_ngcontent-udm-1] */
.foo[bar~="baz2"][_ngcontent-udm-1] {
    color: red;
}

I don't see the reason for this behavior but for me it seems to be wrong.

The results were the same on Chrome and Firefox on a windows machine with angular rc1 and rc3. If encapsulation is set to ViewEncapsulation.None the css code works as expected, but I need the encapsulation.

[zoechi]

A plunker to reproduce would be great

[esagawe]

http://plnkr.co/edit/tyv4edAQckTWDPd9T81d?p=preview

[esagawe]

Do you need further information for this issue? I want to build a little widget and need a fix for it.

If you tell me where the css code is written to the html head, I could try to fix it on my own and create a pull request. I think it's somewhere within the ShadowCss class (shimCssText()), but I havn't debugged yet.

Btw. one[attr~="value"] is missing within the unit tests.

[esagawe]

The problem is the tilde within the seperators list within shadow_css.ts (line 429). My idea to remove the tilde from there doesn't work for the selector one ~ two {}.

Another solution could be to edit the final string with something like this:

var scopeSelectorExpression = new RegExp(/\[${scopeSelector}\] \~ \=, 'g');

scopeSelector = scoped + _scopeSelectorPart(selector.substring(startIndex));

return scopeSelector.replace(scopeSelectorExpression, '~=');

I don't really like this solution, but it should solve the problem. I can't be sure because the unit tests aren't running locally.

[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.}