Support parsing special selector syntax (::deep, ::v-deep, etc…)

[thecrypticace]

In the wild it's not uncommon to see some more esoteric selector syntax being used. Generally in component-using frameworks like Vue, Angular, etc… that also have built-in, scoped styling support.

There seem to be three different classes of selectors:

• Pseudo-elements that have selector parts after them
• Custom combinators (>>>, and /deep/)
• Custom pseudo-class functions taking a selector list

The list of some weird selectors we've seen:

• .foo ::deep .bar (Blazor),
• .foo ::v-deep .bar (Vue; deprecated),
• .foo ::ng-deep .bar (Angular; deprecated)
• .foo >>> .bar (Angular, Vue; deprecated)
• .foo /deep/ .bar (Angular, Vue; deprecated),
• :deep(<selector-list>) (Vue)

In Angular the use of component-piercing in CSS seems to be deprecated — I don't know if there's a replacement syntax for this or not. Additionally in Vue some older syntax has been deprecated.

In any case, these definitely occur in the wild and Lightning CSS currently breaks when trying to parse CSS with these present. It would be fantastic if there were some mechanism by which Lightning CSS could parse these selectors — or at the very least not error on them.

[devongovett]

Ok, I think I got them all. See above commits.