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

cssVars.spec.ts — vue Source File

Architecture documentation for cssVars.spec.ts, a typescript file in the vue codebase. 4 imports, 0 dependents.

File typescript VueCore 4 imports

Entity Profile

Dependency Diagram

graph LR
  96b0a941_14dd_6c12_d506_e1acdf62650e["cssVars.spec.ts"]
  2d0b7943_2ac1_bdbf_a8a4_e0377d6f068a["index.ts"]
  96b0a941_14dd_6c12_d506_e1acdf62650e --> 2d0b7943_2ac1_bdbf_a8a4_e0377d6f068a
  6d6bc116_08b7_aba4_746f_b6a4c1096a7f["util.ts"]
  96b0a941_14dd_6c12_d506_e1acdf62650e --> 6d6bc116_08b7_aba4_746f_b6a4c1096a7f
  af8cc907_eee9_5cc2_ae25_acd9ed4278cf["compile"]
  96b0a941_14dd_6c12_d506_e1acdf62650e --> af8cc907_eee9_5cc2_ae25_acd9ed4278cf
  8867eb91_50d2_a122_a5c3_e8fe547b1016["assertCode"]
  96b0a941_14dd_6c12_d506_e1acdf62650e --> 8867eb91_50d2_a122_a5c3_e8fe547b1016
  style 96b0a941_14dd_6c12_d506_e1acdf62650e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { compileStyle, parse } from '../src'
import { mockId, compile, assertCode } from './util'

describe('CSS vars injection', () => {
  test('generating correct code for nested paths', () => {
    const { content } = compile(
      `<script>const a = 1</script>\n` +
        `<style>div{
          color: v-bind(color);
          font-size: v-bind('font.size');
        }</style>`
    )
    expect(content).toMatch(`_useCssVars((_vm, _setup) => ({
  "${mockId}-color": (_vm.color),
  "${mockId}-font_size": (_vm.font.size)
})`)
    assertCode(content)
  })

  test('w/ normal <script> binding analysis', () => {
    const { content } = compile(
      `<script>
      export default {
        setup() {
          return {
            size: ref('100px')
          }
        }
      }
      </script>\n` +
        `<style>
          div {
            font-size: v-bind(size);
          }
        </style>`
    )
    expect(content).toMatch(`_useCssVars((_vm, _setup) => ({
  "${mockId}-size": (_vm.size)
})`)
    expect(content).toMatch(`import { useCssVars as _useCssVars } from 'vue'`)
    assertCode(content)
  })

  test('w/ <script setup> binding analysis', () => {
    const { content } = compile(
      `<script setup>
        import { defineProps, ref } from 'vue'
        const color = 'red'
        const size = ref('10px')
        defineProps({
          foo: String
        })
        </script>\n` +
        `<style>
          div {
            color: v-bind(color);
            font-size: v-bind(size);
            border: v-bind(foo);
          }
        </style>`
// ... (188 more lines)

Domain

Dependencies

Source

Frequently Asked Questions

What does cssVars.spec.ts do?
cssVars.spec.ts is a source file in the vue codebase, written in typescript. It belongs to the VueCore domain.
What does cssVars.spec.ts depend on?
cssVars.spec.ts imports 4 module(s): assertCode, compile, index.ts, util.ts.
Where is cssVars.spec.ts in the architecture?
cssVars.spec.ts is located at packages/compiler-sfc/test/cssVars.spec.ts (domain: VueCore, directory: packages/compiler-sfc/test).

Analyze Your Own Codebase

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

Try Supermodel Free