scopedPlugin() — vue Function Reference

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

Function typescript SfcCompiler ScriptCompiler calls 1 called by 1

Entity Profile

SfcCompiler→ ScriptCompiler→ scopedPlugin() — vue Function Reference

Dependency Diagram

graph TD
  d86bae84_10d8_7bbb_4a04_234c48dfb075["scopedPlugin()"]
  822b2e28_d690_8f44_42af_ffc75c6a194a["scoped.ts"]
  d86bae84_10d8_7bbb_4a04_234c48dfb075 -->|defined in| 822b2e28_d690_8f44_42af_ffc75c6a194a
  eb225a87_b3c1_d8e5_4365_2b3c8f37effc["doCompileStyle()"]
  eb225a87_b3c1_d8e5_4365_2b3c8f37effc -->|calls| d86bae84_10d8_7bbb_4a04_234c48dfb075
  cbc564d0_cbc4_b3c1_202b_f67e009171ed["processRule()"]
  d86bae84_10d8_7bbb_4a04_234c48dfb075 -->|calls| cbc564d0_cbc4_b3c1_202b_f67e009171ed
  style d86bae84_10d8_7bbb_4a04_234c48dfb075 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/compiler-sfc/src/stylePlugins/scoped.ts lines 7–59

const scopedPlugin: PluginCreator<string> = (id = '') => {
  const keyframes = Object.create(null)
  const shortId = id.replace(/^data-v-/, '')

  return {
    postcssPlugin: 'vue-sfc-scoped',
    Rule(rule) {
      processRule(id, rule)
    },
    AtRule(node) {
      if (
        /-?keyframes$/.test(node.name) &&
        !node.params.endsWith(`-${shortId}`)
      ) {
        // register keyframes
        keyframes[node.params] = node.params = node.params + '-' + shortId
      }
    },
    OnceExit(root) {
      if (Object.keys(keyframes).length) {
        // If keyframes are found in this <style>, find and rewrite animation names
        // in declarations.
        // Caveat: this only works for keyframes and animation rules in the same
        // <style> element.
        // individual animation-name declaration
        root.walkDecls(decl => {
          if (animationNameRE.test(decl.prop)) {
            decl.value = decl.value
              .split(',')
              .map(v => keyframes[v.trim()] || v.trim())
              .join(',')
          }
          // shorthand
          if (animationRE.test(decl.prop)) {
            decl.value = decl.value
              .split(',')
              .map(v => {
                const vals = v.trim().split(/\s+/)
                const i = vals.findIndex(val => keyframes[val])
                if (i !== -1) {
                  vals.splice(i, 1, keyframes[vals[i]])
                  return vals.join(' ')
                } else {
                  return v
                }
              })
              .join(',')
          }
        })
      }
    }
  }
}