lexBinding() — vue Function Reference

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

Function typescript CompilerSFC TemplateTransformer called by 2

Entity Profile

CompilerSFC→ TemplateTransformer→ lexBinding() — vue Function Reference

Dependency Diagram

graph TD
  bcee3b43_06f3_99ea_946d_4925b36f7390["lexBinding()"]
  b08241c7_738d_9e08_b885_fad82facd4f3["cssVars.ts"]
  bcee3b43_06f3_99ea_946d_4925b36f7390 -->|defined in| b08241c7_738d_9e08_b885_fad82facd4f3
  e9d55bf3_a525_60d3_e948_546c1b25721c["parseCssVars()"]
  e9d55bf3_a525_60d3_e948_546c1b25721c -->|calls| bcee3b43_06f3_99ea_946d_4925b36f7390
  fb6267c8_5229_7c63_13f5_a76775258149["cssVarsPlugin()"]
  fb6267c8_5229_7c63_13f5_a76775258149 -->|calls| bcee3b43_06f3_99ea_946d_4925b36f7390
  style bcee3b43_06f3_99ea_946d_4925b36f7390 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
}