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 CompilerSFC 4 imports

Entity Profile

Dependency Diagram

graph LR
  f4ed901c_e7f6_857a_f801_613160290ece["cssVars.spec.ts"]
  ff0056ca_ef4a_c90b_6818_0264c781fccd["index.ts"]
  f4ed901c_e7f6_857a_f801_613160290ece --> ff0056ca_ef4a_c90b_6818_0264c781fccd
  240d4660_83b3_21e3_5187_23f87cd014f3["util.ts"]
  f4ed901c_e7f6_857a_f801_613160290ece --> 240d4660_83b3_21e3_5187_23f87cd014f3
  2e09cab7_5684_9a0b_b161_afdce66d44af["compile"]
  f4ed901c_e7f6_857a_f801_613160290ece --> 2e09cab7_5684_9a0b_b161_afdce66d44af
  eafc4e76_89fd_2cf1_2320_f0d7b65a3c8f["assertCode"]
  f4ed901c_e7f6_857a_f801_613160290ece --> eafc4e76_89fd_2cf1_2320_f0d7b65a3c8f
  style f4ed901c_e7f6_857a_f801_613160290ece 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 CompilerSFC 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: CompilerSFC, 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