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

Closed
esagawe opened this Issue Jun 27, 2016 · 4 comments

Comments

Projects
None yet
5 participants
@esagawe
Contributor

esagawe commented Jun 27, 2016

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

This comment has been minimized.

Show comment
Hide comment
@zoechi

zoechi Jun 27, 2016

Contributor

A plunker to reproduce would be great

Contributor

zoechi commented Jun 27, 2016

A plunker to reproduce would be great

@esagawe

This comment has been minimized.

Show comment
Hide comment
@esagawe

This comment has been minimized.

Show comment
Hide comment
@esagawe

esagawe Aug 23, 2016

Contributor

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.

Contributor

esagawe commented Aug 23, 2016

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 added a commit to esagawe/angular that referenced this issue Sep 17, 2016

fix(compiler): [attribute~=value] selector
Add support for the [attribute~=value] selector

Closes #9644

@esagawe esagawe referenced this issue Sep 17, 2016

Closed

fix(compiler): [attribute~=value] selector #11691

2 of 3 tasks complete
@esagawe

This comment has been minimized.

Show comment
Hide comment
@esagawe

esagawe Sep 17, 2016

Contributor

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.

Contributor

esagawe commented Sep 17, 2016

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.

esagawe added a commit to esagawe/angular that referenced this issue Sep 18, 2016

fix(compiler): [attribute~=value] selector
Change the seperator regular expression to ignore tildes which are followed by an equal sign.

Closes #9644

esagawe added a commit to esagawe/angular that referenced this issue Sep 18, 2016

fix(compiler): [attribute~=value] selector
Change the seperator regular expression to ignore tildes which are followed by an equal sign.

Closes #9644

@esagawe esagawe referenced this issue Sep 18, 2016

Merged

fix(compiler): [attribute~=value] selector #11696

2 of 3 tasks complete

@alexeagle alexeagle closed this in #11696 Sep 18, 2016

alexeagle added a commit that referenced this issue Sep 18, 2016

fix(compiler): [attribute~=value] selector (#11696)
Change the seperator regular expression to ignore tildes which are followed by an equal sign.

Closes #9644
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment