import { compileStyle } from '../src' import { compileSFCScript, assertCode } from './utils' describe('CSS vars injection', () => { describe('codegen', () => { test('\n` + `` ).content ) }) test('\n` + `` ).content ) }) test('\n` + `` ).content ) }) test('w/ \n` + `` ).content ) }) }) test('generating correct code for nested paths', () => { const { content } = compileSFCScript( `\n` + `` ) expect(content).toMatch(`_useCssVars(_ctx => ({ color: (_ctx.color), font_size: (_ctx.font.size) })`) assertCode(content) }) test('w/ \n` + `` ) // should handle: // 1. local const bindings // 2. local potential ref bindings // 3. props bindings (analyzed) expect(content).toMatch(`_useCssVars(_ctx => ({ color: (color), size: (_unref(size)), foo: (__props.foo) })`) expect(content).toMatch( `import { useCssVars as _useCssVars, unref as _unref } from 'vue'` ) assertCode(content) }) test('should rewrite CSS vars in scoped mode', () => { const { code } = compileStyle({ source: `.foo { color: var(--v-bind:color); font-size: var(--:font.size); }`, filename: 'test.css', id: 'data-v-test' }) expect(code).toMatchInlineSnapshot(` ".foo { color: var(--test-color); font-size: var(--test-font_size); }" `) }) })