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 TemplateRenderer 5 imports 2 dependents 3 functions

Entity Profile

Dependency Diagram

graph LR
  1bba1212_b24c_b9c5_98d6_faf10821140f["style.ts"]
  a0033b88_b768_84c8_da01_e6315f54737c["util.ts"]
  1bba1212_b24c_b9c5_98d6_faf10821140f --> a0033b88_b768_84c8_da01_e6315f54737c
  1e08374e_4b7f_6901_4657_b7f1d04e4395["escape"]
  1bba1212_b24c_b9c5_98d6_faf10821140f --> 1e08374e_4b7f_6901_4657_b7f1d04e4395
  156bf2e1_8a13_f22d_5437_54f14bcef8fa["util"]
  1bba1212_b24c_b9c5_98d6_faf10821140f --> 156bf2e1_8a13_f22d_5437_54f14bcef8fa
  40b0afbe_a3c8_9769_c890_cf9c2266939c["style"]
  1bba1212_b24c_b9c5_98d6_faf10821140f --> 40b0afbe_a3c8_9769_c890_cf9c2266939c
  81ed4f13_7d68_6e21_7425_cf978f68576f["vnode"]
  1bba1212_b24c_b9c5_98d6_faf10821140f --> 81ed4f13_7d68_6e21_7425_cf978f68576f
  0b31f4f0_30b4_7b6a_627f_14db65cbd2d8["index.ts"]
  0b31f4f0_30b4_7b6a_627f_14db65cbd2d8 --> 1bba1212_b24c_b9c5_98d6_faf10821140f
  b4035da1_cf86_9027_2643_66e42fd3924f["runtime-helpers.ts"]
  b4035da1_cf86_9027_2643_66e42fd3924f --> 1bba1212_b24c_b9c5_98d6_faf10821140f
  style 1bba1212_b24c_b9c5_98d6_faf10821140f 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, TemplateRenderer 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: TemplateRenderer, 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