CSS scoping deep combinators #24289
CSS scoping deep combinators #24289
Conversation
ghost
added
the
area-mvc
|
Note: the diff in the implementation is really noisy and makes it look like I changed more than I did. It's because previously the only kind of "edit" done in the CSS rewriter was "insertion", and I had to generalise this to support "deletion" too, which means that all the names that included "insert" were no longer applicable and I had to rename them all it "edit" instead. |
| { | ||
| // ::deep is a convenient and friendly syntax | ||
| // ::razor-deep is an alias the people can use if they are concerned about possible clashes with other meanings | ||
| return string.Equals(simpleSelectorText, "::deep", StringComparison.Ordinal) |
There was a problem hiding this comment.
Note, I removed ::razor-deep because I realised it doesn't make any sense. These tokens are already stripped out by the time the CSS reaches the browser, so it's not possible to clash against anything in the browser. The place you could clash is if you wanted the token not to be interpreted as a deep combinator by our rewriter (because you did want it to reach the browser). But adding more aliases doesn't give you any way to do that, so it was pointless.
In the future we could expose some option for what the combinator text is, but there's no requirement for that today.
| @@ -75,6 +75,40 @@ public void HandlesSpacesAndCommentsWithinSelectors() | |||
| ", result); | |||
| } | |||
|
|
|||
| [Fact] | |||
| public void RespectsDeepCombinator() | |||
There was a problem hiding this comment.
It will be interesting to have a case with multiple instances of ::deep, something like .a ::deep .b ::deep .c
SteveSandersonMS
force-pushed
the
stevesa/css-scoping-deep
branch
from
b81be91 to
18f6f17
Compare
|
@mkArtakMSFT Can you merge this once the tests pass? It's for preview 8. |
SteveSandersonMS
force-pushed
the
stevesa/css-scoping-deep
branch
from
18f6f17 to
81b25e4
Compare
SteveSandersonMS
force-pushed
the
stevesa/css-scoping-deep
branch
from
81b25e4 to
9ae93d2
Compare
SteveSandersonMS
force-pushed
the
stevesa/css-scoping-deep
branch
from
3257eff to
2747e54
Compare
SteveSandersonMS
force-pushed
the
stevesa/css-scoping-deep
branch
from
2747e54 to
aab15cc
Compare
This is needed to make CSS scoping useful when you're trying to style elements produced by descendants. It's equivalent to deep selectors in Vue.
For example, we want to use this in the template to style the
<a>tags emitted byNavLink.cc @javiercn who has context on this