Skip to content

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

@thecrypticace

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions