getStyle() — vue Function Reference

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

Function typescript WebPlatform WebCompiler calls 2 called by 2

Entity Profile

WebPlatform→ WebCompiler→ getStyle() — vue Function Reference

Dependency Diagram

graph TD
  57f662e9_6308_3a96_2b4b_c4b139354113["getStyle()"]
  8592a0f5_0900_fc83_2b1d_e1240b0409ce["renderStyle()"]
  8592a0f5_0900_fc83_2b1d_e1240b0409ce -->|calls| 57f662e9_6308_3a96_2b4b_c4b139354113
  bb6b3e47_4412_613f_a390_b2681286129d["updateStyle()"]
  bb6b3e47_4412_613f_a390_b2681286129d -->|calls| 57f662e9_6308_3a96_2b4b_c4b139354113
  b3325b50_9eba_df40_6a1a_f7b570196e0a["normalizeStyleData()"]
  57f662e9_6308_3a96_2b4b_c4b139354113 -->|calls| b3325b50_9eba_df40_6a1a_f7b570196e0a
  133969d0_a7bd_f1c5_46a3_9fb8fd249583["extend()"]
  57f662e9_6308_3a96_2b4b_c4b139354113 -->|calls| 133969d0_a7bd_f1c5_46a3_9fb8fd249583
  style 57f662e9_6308_3a96_2b4b_c4b139354113 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/util/style.ts lines 41–71

export function getStyle(vnode: VNodeWithData, checkChild: boolean): Object {
  const res = {}
  let styleData

  if (checkChild) {
    let childNode: VNodeWithData | VNode = vnode
    while (childNode.componentInstance) {
      childNode = childNode.componentInstance._vnode!
      if (
        childNode &&
        childNode.data &&
        (styleData = normalizeStyleData(childNode.data))
      ) {
        extend(res, styleData)
      }
    }
  }

  if ((styleData = normalizeStyleData(vnode.data))) {
    extend(res, styleData)
  }

  let parentNode: VNodeWithData | VNode | undefined = vnode
  // @ts-expect-error parentNode.parent not VNodeWithData
  while ((parentNode = parentNode.parent)) {
    if (parentNode.data && (styleData = normalizeStyleData(parentNode.data))) {
      extend(res, styleData)
    }
  }
  return res
}