import { compileStyle } from '../src'
import { mockId, compileSFCScript, assertCode } from './utils'
describe('CSS vars injection', () => {
test('generating correct code for nested paths', () => {
const { content } = compileSFCScript(
`\n` +
``
)
expect(content).toMatch(`_useCssVars(_ctx => ({
"${mockId}-color": (_ctx.color),
"${mockId}-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 => ({
"${mockId}-color": (color),
"${mockId}-size": (_unref(size)),
"${mockId}-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: v-bind(color);
font-size: v-bind('font.size');
}`,
filename: 'test.css',
id: 'data-v-test'
})
expect(code).toMatchInlineSnapshot(`
".foo {
color: var(--test-color);
font-size: var(--test-font_size);
}"
`)
})
describe('codegen', () => {
test('\n` +
``
).content
)
})
test('\n` +
``
).content
)
})
test('\n` + ``
).content
)
})
test('w/ \n` +
``
).content
)
})
})
})