vue Architecture Docs
Home / File/ style.ts — vue Source File

style.ts — vue Source File

Architecture documentation for style.ts, a typescript file in the vue codebase. 5 imports, 2 dependents.

File typescript ServerRenderer BundleRenderer 5 imports 2 dependents 3 functions

Entity Profile

Dependency Diagram

graph LR
  9ebd262e_02c0_2bf3_c67d_fa9e59f467c5["style.ts"]
  89eacf5c_deee_e42e_d519_69cb05e48e63["util.ts"]
  9ebd262e_02c0_2bf3_c67d_fa9e59f467c5 --> 89eacf5c_deee_e42e_d519_69cb05e48e63
  4e8211dc_aa7e_481a_3002_b46e9e8afd4e["escape"]
  9ebd262e_02c0_2bf3_c67d_fa9e59f467c5 --> 4e8211dc_aa7e_481a_3002_b46e9e8afd4e
  09aa5370_2caa_6b33_3f44_6ac5211bd11b["util"]
  9ebd262e_02c0_2bf3_c67d_fa9e59f467c5 --> 09aa5370_2caa_6b33_3f44_6ac5211bd11b
  472b16b5_ed73_6ace_4ab4_82bfb52955ec["style"]
  9ebd262e_02c0_2bf3_c67d_fa9e59f467c5 --> 472b16b5_ed73_6ace_4ab4_82bfb52955ec
  ba925ef2_b0f4_efe3_c23d_fe293c46b2c1["vnode"]
  9ebd262e_02c0_2bf3_c67d_fa9e59f467c5 --> ba925ef2_b0f4_efe3_c23d_fe293c46b2c1
  541324d1_64ab_2ed6_961a_c199b29f9df6["index.ts"]
  541324d1_64ab_2ed6_961a_c199b29f9df6 --> 9ebd262e_02c0_2bf3_c67d_fa9e59f467c5
  b5390896_1fe7_f1d9_81bd_c577287dddd4["runtime-helpers.ts"]
  b5390896_1fe7_f1d9_81bd_c577287dddd4 --> 9ebd262e_02c0_2bf3_c67d_fa9e59f467c5
  style 9ebd262e_02c0_2bf3_c67d_fa9e59f467c5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { escape, noUnitNumericStyleProps } from '../util'
import { hyphenate } from 'shared/util'
import { getStyle } from 'web/util/style'
import type { VNodeWithData } from 'types/vnode'

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
}

function normalizeValue(key: string, value: any): string {
  if (
    typeof value === 'string' ||
    (typeof value === 'number' && noUnitNumericStyleProps[key]) ||
    value === 0
  ) {
    return `${key}:${value};`
  } else {
    // invalid values
    return ``
  }
}

export default function renderStyle(vnode: VNodeWithData): string | undefined {
  const styleText = genStyle(getStyle(vnode, false))
  if (styleText !== '') {
    return ` style=${JSON.stringify(escape(styleText))}`
  }
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does style.ts do?
style.ts is a source file in the vue codebase, written in typescript. It belongs to the ServerRenderer domain, BundleRenderer subdomain.
What functions are defined in style.ts?
style.ts defines 3 function(s): genStyle, normalizeValue, renderStyle.
What does style.ts depend on?
style.ts imports 5 module(s): escape, style, util, util.ts, vnode.
What files import style.ts?
style.ts is imported by 2 file(s): index.ts, runtime-helpers.ts.
Where is style.ts in the architecture?
style.ts is located at packages/server-renderer/src/modules/style.ts (domain: ServerRenderer, subdomain: BundleRenderer, directory: packages/server-renderer/src/modules).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free