lexBinding() — vue Function Reference

Architecture documentation for the lexBinding() function in cssVars.ts from the vue codebase.

Function typescript SfcCompiler ScriptCompiler called by 2

Entity Profile

SfcCompiler→ ScriptCompiler→ lexBinding() — vue Function Reference

Dependency Diagram

graph TD
  944a9dec_2883_0db9_e8db_6d29b47bbeae["lexBinding()"]
  445bc304_0400_2ae2_a33b_eaa1d5e1788a["cssVars.ts"]
  944a9dec_2883_0db9_e8db_6d29b47bbeae -->|defined in| 445bc304_0400_2ae2_a33b_eaa1d5e1788a
  9bf0fc0d_be28_66be_0264_6ad60cd848e2["parseCssVars()"]
  9bf0fc0d_be28_66be_0264_6ad60cd848e2 -->|calls| 944a9dec_2883_0db9_e8db_6d29b47bbeae
  96711959_2cc0_7721_49fa_91560867d8c7["cssVarsPlugin()"]
  96711959_2cc0_7721_49fa_91560867d8c7 -->|calls| 944a9dec_2883_0db9_e8db_6d29b47bbeae
  style 944a9dec_2883_0db9_e8db_6d29b47bbeae fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/compiler-sfc/src/cssVars.ts lines 69–104

function lexBinding(content: string, start: number): number | null {
  let state: LexerState = LexerState.inParens
  let parenDepth = 0

  for (let i = start; i < content.length; i++) {
    const char = content.charAt(i)
    switch (state) {
      case LexerState.inParens:
        if (char === `'`) {
          state = LexerState.inSingleQuoteString
        } else if (char === `"`) {
          state = LexerState.inDoubleQuoteString
        } else if (char === `(`) {
          parenDepth++
        } else if (char === `)`) {
          if (parenDepth > 0) {
            parenDepth--
          } else {
            return i
          }
        }
        break
      case LexerState.inSingleQuoteString:
        if (char === `'`) {
          state = LexerState.inParens
        }
        break
      case LexerState.inDoubleQuoteString:
        if (char === `"`) {
          state = LexerState.inParens
        }
        break
    }
  }
  return null
}