Home / File/ style.ts — vue Source File

style.ts — vue Source File

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

File typescript WebPlatform WebCompiler 4 imports 1 dependents 2 functions

Entity Profile

Dependency Diagram

graph LR
  80165169_1a72_5f4a_6d01_a0cf9b7a21e9["style.ts"]
  ae4c513b_1e5d_f408_b254_6ab6e8753481["text-parser"]
  80165169_1a72_5f4a_6d01_a0cf9b7a21e9 --> ae4c513b_1e5d_f408_b254_6ab6e8753481
  472b16b5_ed73_6ace_4ab4_82bfb52955ec["style"]
  80165169_1a72_5f4a_6d01_a0cf9b7a21e9 --> 472b16b5_ed73_6ace_4ab4_82bfb52955ec
  a53a30c8_9418_4cc4_6709_164fca9149e1["helpers"]
  80165169_1a72_5f4a_6d01_a0cf9b7a21e9 --> a53a30c8_9418_4cc4_6709_164fca9149e1
  a80b8e3b_d720_9146_3bf6_594d4ee5dd77["compiler"]
  80165169_1a72_5f4a_6d01_a0cf9b7a21e9 --> a80b8e3b_d720_9146_3bf6_594d4ee5dd77
  a85501f5_3770_59af_2f90_3e1b4461f2fc["index.ts"]
  a85501f5_3770_59af_2f90_3e1b4461f2fc --> 80165169_1a72_5f4a_6d01_a0cf9b7a21e9
  style 80165169_1a72_5f4a_6d01_a0cf9b7a21e9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { parseText } from 'compiler/parser/text-parser'
import { parseStyleText } from 'web/util/style'
import { getAndRemoveAttr, getBindingAttr, baseWarn } from 'compiler/helpers'
import { ASTElement, CompilerOptions, ModuleOptions } from 'types/compiler'

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
  }
}

function genData(el: ASTElement): string {
  let data = ''
  if (el.staticStyle) {
    data += `staticStyle:${el.staticStyle},`
  }
  if (el.styleBinding) {
    data += `style:(${el.styleBinding}),`
  }
  return data
}

export default {
  staticKeys: ['staticStyle'],
  transformNode,
  genData
} as ModuleOptions

Domain

Subdomains

Dependencies

  • compiler
  • helpers
  • style
  • text-parser

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 WebPlatform domain, WebCompiler subdomain.
What functions are defined in style.ts?
style.ts defines 2 function(s): genData, transformNode.
What does style.ts depend on?
style.ts imports 4 module(s): compiler, helpers, style, text-parser.
What files import style.ts?
style.ts is imported by 1 file(s): index.ts.
Where is style.ts in the architecture?
style.ts is located at src/platforms/web/compiler/modules/style.ts (domain: WebPlatform, subdomain: WebCompiler, directory: src/platforms/web/compiler/modules).

Analyze Your Own Codebase

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

Try Supermodel Free