transformNode() — vue Function Reference

Architecture documentation for the transformNode() function in style.ts from the vue codebase.

Function typescript WebPlatform WebCompiler

Entity Profile

WebPlatform→ WebCompiler→ transformNode() — vue Function Reference

Dependency Diagram

graph TD
  92358987_d84f_06ac_e2c5_b03ab89a4214["transformNode()"]
  80165169_1a72_5f4a_6d01_a0cf9b7a21e9["style.ts"]
  92358987_d84f_06ac_e2c5_b03ab89a4214 -->|defined in| 80165169_1a72_5f4a_6d01_a0cf9b7a21e9
  style 92358987_d84f_06ac_e2c5_b03ab89a4214 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/compiler/modules/style.ts lines 6–30

function transformNode(el: ASTElement, options: CompilerOptions) {
  const warn = options.warn || baseWarn
  const staticStyle = getAndRemoveAttr(el, 'style')
  if (staticStyle) {
    /* istanbul ignore if */
    if (__DEV__) {
      const res = parseText(staticStyle, options.delimiters)
      if (res) {
        warn(
          `style="${staticStyle}": ` +
            'Interpolation inside attributes has been removed. ' +
            'Use v-bind or the colon shorthand instead. For example, ' +
            'instead of <div style="{{ val }}">, use <div :style="val">.',
          el.rawAttrsMap['style']
        )
      }
    }
    el.staticStyle = JSON.stringify(parseStyleText(staticStyle))
  }

  const styleBinding = getBindingAttr(el, 'style', false /* getStatic */)
  if (styleBinding) {
    el.styleBinding = styleBinding
  }
}