feat: implement ::-v-deep as a shadow piercing combinator #54
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
haoqunjiang
changed the title
yyx990803
reviewed
Feb 18, 2019
lib/stylePlugins/scoped.ts
Outdated
| @@ -35,6 +36,13 @@ export default postcss.plugin('add-id', (options: any) => (root: Root) => { | |||
| n.spaces.before = n.spaces.after = '' | |||
| return false | |||
| } | |||
|
|
|||
| // in newer versions of sass, /deep/ support is also dropped, so add a ::-v-deep alias | |||
| if (n.type === 'pseudo' && n.value === '::-v-deep') { | |||
There was a problem hiding this comment.
why is it named ::-v-deep instead of ::v-deep?
There was a problem hiding this comment.
CSS prefixes typically start with -, e.g. -webkit-, so I think we can follow this convention to indicate that it's not a standard selector.
There was a problem hiding this comment.
I think it makes it more verbose than necessary. It's not a property name, and is also prefixed with :: already.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
>>>is semantically invalid in a stylesheet/deep/was deprecated and removed from all browsers, and dart-sass no longer supports parsing it::ng-deepalias feat(compiler): add support::ng-deepangular/angular#17677In the long run we should move to shadow parts for such use cases. See this article (the syntax has slightly change since the article published but the idea remains).
A caveats of this implementation: since
::-v-deepis parsed as a pseudo element, we can't elegantly remove the arounding spaces, so there's an extra space remained in the added test case.Update: as @Justineo pointed out, it is a common practice for a vendor prefixed selector to start with
-, so renamed it to::-v-deep.