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

cssVars.ts — vue Source File

Architecture documentation for cssVars.ts, a typescript file in the vue codebase. 8 imports, 3 dependents.

File typescript SfcCompiler ScriptCompiler 8 imports 3 dependents 8 functions

Entity Profile

Dependency Diagram

graph LR
  445bc304_0400_2ae2_a33b_eaa1d5e1788a["cssVars.ts"]
  1a27e6b3_7515_332e_8d02_d958c72a568c["types.ts"]
  445bc304_0400_2ae2_a33b_eaa1d5e1788a --> 1a27e6b3_7515_332e_8d02_d958c72a568c
  5d984136_f02d_b459_9f20_2306143d1d20["BindingMetadata"]
  445bc304_0400_2ae2_a33b_eaa1d5e1788a --> 5d984136_f02d_b459_9f20_2306143d1d20
  0efbfda6_f2a2_633c_6405_ea7a32c8a88d["parseComponent.ts"]
  445bc304_0400_2ae2_a33b_eaa1d5e1788a --> 0efbfda6_f2a2_633c_6405_ea7a32c8a88d
  12e2cd32_caec_3647_52d2_fbf5316b83b2["SFCDescriptor"]
  445bc304_0400_2ae2_a33b_eaa1d5e1788a --> 12e2cd32_caec_3647_52d2_fbf5316b83b2
  472584c7_15d2_7ac4_2300_5c0fac3bab21["prefixIdentifiers.ts"]
  445bc304_0400_2ae2_a33b_eaa1d5e1788a --> 472584c7_15d2_7ac4_2300_5c0fac3bab21
  3c98115b_726f_620d_0dc3_3d696ff8a7c2["prefixIdentifiers"]
  445bc304_0400_2ae2_a33b_eaa1d5e1788a --> 3c98115b_726f_620d_0dc3_3d696ff8a7c2
  1aa815c2_41ad_6268_0ebd_effb0617ac66["postcss"]
  445bc304_0400_2ae2_a33b_eaa1d5e1788a --> 1aa815c2_41ad_6268_0ebd_effb0617ac66
  fc941c56_f02c_3273_7345_35c4fdf47a8a["hash-sum"]
  445bc304_0400_2ae2_a33b_eaa1d5e1788a --> fc941c56_f02c_3273_7345_35c4fdf47a8a
  c9346cac_54e3_f6ca_68a7_03c6e82c9609["compileScript.ts"]
  c9346cac_54e3_f6ca_68a7_03c6e82c9609 --> 445bc304_0400_2ae2_a33b_eaa1d5e1788a
  1aad1b66_4ff0_fcc3_9eab_fd33ebad4a4c["compileStyle.ts"]
  1aad1b66_4ff0_fcc3_9eab_fd33ebad4a4c --> 445bc304_0400_2ae2_a33b_eaa1d5e1788a
  a74639a8_41f7_d409_723a_4c6194e0c72d["parse.ts"]
  a74639a8_41f7_d409_723a_4c6194e0c72d --> 445bc304_0400_2ae2_a33b_eaa1d5e1788a
  style 445bc304_0400_2ae2_a33b_eaa1d5e1788a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { BindingMetadata } from './types'
import { SFCDescriptor } from './parseComponent'
import { PluginCreator } from 'postcss'
import hash from 'hash-sum'
import { prefixIdentifiers } from './prefixIdentifiers'

export const CSS_VARS_HELPER = `useCssVars`

export function genCssVarsFromList(
  vars: string[],
  id: string,
  isProd: boolean,
  isSSR = false
): string {
  return `{\n  ${vars
    .map(
      key => `"${isSSR ? `--` : ``}${genVarName(id, key, isProd)}": (${key})`
    )
    .join(',\n  ')}\n}`
}

function genVarName(id: string, raw: string, isProd: boolean): string {
  if (isProd) {
    return hash(id + raw)
  } else {
    return `${id}-${raw.replace(/([^\w-])/g, '_')}`
  }
}

function normalizeExpression(exp: string) {
  exp = exp.trim()
  if (
    (exp[0] === `'` && exp[exp.length - 1] === `'`) ||
    (exp[0] === `"` && exp[exp.length - 1] === `"`)
  ) {
    return exp.slice(1, -1)
  }
  return exp
}

const vBindRE = /v-bind\s*\(/g

export function parseCssVars(sfc: SFCDescriptor): string[] {
  const vars: string[] = []
  sfc.styles.forEach(style => {
    let match
    // ignore v-bind() in comments /* ... */
    const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '')
    while ((match = vBindRE.exec(content))) {
      const start = match.index + match[0].length
      const end = lexBinding(content, start)
      if (end !== null) {
        const variable = normalizeExpression(content.slice(start, end))
        if (!vars.includes(variable)) {
          vars.push(variable)
        }
      }
    }
  })
  return vars
// ... (120 more lines)

Domain

Subdomains

Functions

Types

Dependencies

Imported By

Source

Frequently Asked Questions

What does cssVars.ts do?
cssVars.ts is a source file in the vue codebase, written in typescript. It belongs to the SfcCompiler domain, ScriptCompiler subdomain.
What functions are defined in cssVars.ts?
cssVars.ts defines 8 function(s): cssVarsPlugin, genCssVarsCode, genCssVarsFromList, genNormalScriptCssVarsCode, genVarName, lexBinding, normalizeExpression, parseCssVars.
What does cssVars.ts depend on?
cssVars.ts imports 8 module(s): BindingMetadata, SFCDescriptor, hash-sum, parseComponent.ts, postcss, prefixIdentifiers, prefixIdentifiers.ts, types.ts.
What files import cssVars.ts?
cssVars.ts is imported by 3 file(s): compileScript.ts, compileStyle.ts, parse.ts.
Where is cssVars.ts in the architecture?
cssVars.ts is located at packages/compiler-sfc/src/cssVars.ts (domain: SfcCompiler, subdomain: ScriptCompiler, directory: packages/compiler-sfc/src).

Analyze Your Own Codebase

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

Try Supermodel Free