genStyle() — vue Function Reference

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

Function typescript ServerRenderer BundleRenderer calls 2 called by 2

Entity Profile

ServerRenderer→ BundleRenderer→ genStyle() — vue Function Reference

Dependency Diagram

graph TD
  eabb9457_0741_a2c4_0cfc_562a8bb2bdb4["genStyle()"]
  2b67a07e_643c_d534_f8f0_2b694e3a63a5["renderStyle()"]
  2b67a07e_643c_d534_f8f0_2b694e3a63a5 -->|calls| eabb9457_0741_a2c4_0cfc_562a8bb2bdb4
  b0a08629_d00b_0235_9f37_5c787999776a["renderSSRStyle()"]
  b0a08629_d00b_0235_9f37_5c787999776a -->|calls| eabb9457_0741_a2c4_0cfc_562a8bb2bdb4
  e78b8b23_1803_b152_f10f_06b6c4015dc9["hyphenate()"]
  eabb9457_0741_a2c4_0cfc_562a8bb2bdb4 -->|calls| e78b8b23_1803_b152_f10f_06b6c4015dc9
  b7ebd27e_3e88_f634_9bc0_c44770718214["normalizeValue()"]
  eabb9457_0741_a2c4_0cfc_562a8bb2bdb4 -->|calls| b7ebd27e_3e88_f634_9bc0_c44770718214
  style eabb9457_0741_a2c4_0cfc_562a8bb2bdb4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/server-renderer/src/modules/style.ts lines 6–20

export function genStyle(style: Object): string {
  let styleText = ''
  for (const key in style) {
    const value = style[key]
    const hyphenatedKey = hyphenate(key)
    if (Array.isArray(value)) {
      for (let i = 0, len = value.length; i < len; i++) {
        styleText += normalizeValue(hyphenatedKey, value[i])
      }
    } else {
      styleText += normalizeValue(hyphenatedKey, value)
    }
  }
  return styleText
}