rewriteSelector() — vue Function Reference

Architecture documentation for the rewriteSelector() function in scoped.ts from the vue codebase.

Function typescript CompilerSFC ScriptCompiler calls 1 called by 1

Entity Profile

CompilerSFC→ ScriptCompiler→ rewriteSelector() — vue Function Reference

Dependency Diagram

graph TD
  4e6f187d_2802_07a7_c3d9_a19c48da8e97["rewriteSelector()"]
  99a3bcbe_5e50_5f54_c9cf_4fcc3035fdfa["processRule()"]
  99a3bcbe_5e50_5f54_c9cf_4fcc3035fdfa -->|calls| 4e6f187d_2802_07a7_c3d9_a19c48da8e97
  5db90ed2_3397_546e_516f_dc63a6ab4fe4["isSpaceCombinator()"]
  4e6f187d_2802_07a7_c3d9_a19c48da8e97 -->|calls| 5db90ed2_3397_546e_516f_dc63a6ab4fe4
  style 4e6f187d_2802_07a7_c3d9_a19c48da8e97 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/compiler-sfc/src/stylePlugins/scoped.ts lines 80–196

function rewriteSelector(
  id: string,
  selector: selectorParser.Selector,
  selectorRoot: selectorParser.Root
) {
  let node: selectorParser.Node | null = null
  let shouldInject = true
  // find the last child node to insert attribute selector
  selector.each(n => {
    // DEPRECATED ">>>" and "/deep/" combinator
    if (
      n.type === 'combinator' &&
      (n.value === '>>>' || n.value === '/deep/')
    ) {
      n.value = ' '
      n.spaces.before = n.spaces.after = ''
      // warn(
      //   `the >>> and /deep/ combinators have been deprecated. ` +
      //     `Use :deep() instead.`
      // )
      return false
    }

    if (n.type === 'pseudo') {
      const { value } = n
      // deep: inject [id] attribute at the node before the ::v-deep
      // combinator.
      if (value === ':deep' || value === '::v-deep') {
        if (n.nodes.length) {
          // .foo ::v-deep(.bar) -> .foo[xxxxxxx] .bar
          // replace the current node with ::v-deep's inner selector
          let last: selectorParser.Selector['nodes'][0] = n
          n.nodes[0].each(ss => {
            selector.insertAfter(last, ss)
            last = ss
          })
          // insert a space combinator before if it doesn't already have one
          const prev = selector.at(selector.index(n) - 1)
          if (!prev || !isSpaceCombinator(prev)) {
            selector.insertAfter(
              n,
              selectorParser.combinator({
                value: ' '
              })
            )
          }
          selector.removeChild(n)
        } else {
          // DEPRECATED usage in v3
          // .foo ::v-deep .bar -> .foo[xxxxxxx] .bar
          // warn(
          //   `::v-deep usage as a combinator has ` +
          //     `been deprecated. Use :deep(<inner-selector>) instead.`
          // )
          const prev = selector.at(selector.index(n) - 1)
          if (prev && isSpaceCombinator(prev)) {
            selector.removeChild(prev)
          }
          selector.removeChild(n)
        }
        return false
      }

      // !!! Vue 2 does not have :slotted support
      // ::v-slotted(.foo) -> .foo[xxxxxxx-s]
      // if (value === ':slotted' || value === '::v-slotted') {
      //   rewriteSelector(id, n.nodes[0], selectorRoot, true /* slotted */)
      //   let last: selectorParser.Selector['nodes'][0] = n
      //   n.nodes[0].each(ss => {
      //     selector.insertAfter(last, ss)
      //     last = ss
      //   })
      //   // selector.insertAfter(n, n.nodes[0])
      //   selector.removeChild(n)
      //   // since slotted attribute already scopes the selector there's no
      //   // need for the non-slot attribute.
      //   shouldInject = false
      //   return false
      // }

      // global: replace with inner selector and do not inject [id].
      // ::v-global(.foo) -> .foo
      if (value === ':global' || value === '::v-global') {
        selectorRoot.insertAfter(selector, n.nodes[0])
        selectorRoot.removeChild(selector)
        return false
      }
    }

    if (n.type !== 'pseudo' && n.type !== 'combinator') {
      node = n
    }
  })

  if (node) {
    ;(node as selectorParser.Node).spaces.after = ''
  } else {
    // For deep selectors & standalone pseudo selectors,
    // the attribute selectors are prepended rather than appended.
    // So all leading spaces must be eliminated to avoid problems.
    selector.first.spaces.before = ''
  }

  if (shouldInject) {
    selector.insertAfter(
      // If node is null it means we need to inject [id] at the start
      // insertAfter can handle `null` here
      node as any,
      selectorParser.attribute({
        attribute: id,
        value: id,
        raws: {},
        quoteMark: `"`
      })
    )
  }
}