Skip to content

Commit

Permalink
fix(compiler-sfc): support complex expression in CSS v-bind() (#5114)
Browse files Browse the repository at this point in the history
fix #5109
  • Loading branch information
edison1105 authored and yyx990803 committed Jan 21, 2022
1 parent 63210fe commit 95d49bf
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 1 deletion.
21 changes: 21 additions & 0 deletions packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,27 @@ return { color, width }
}"
`;
exports[`CSS vars injection codegen should work with w/ complex expression 1`] = `
"import { useCssVars as _useCssVars, unref as _unref } from 'vue'
export default {
setup(__props, { expose }) {
expose();
_useCssVars(_ctx => ({
\\"xxxxxxxx-_a___b____2____px__\\": ((_unref(a) + _unref(b)) / 2 + 'px' ),
\\"xxxxxxxx-__a___b______2___a_\\": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
}))
let a = 100
let b = 200
return { a, b }
}
}"
`;
exports[`CSS vars injection codegen w/ <script setup> 1`] = `
"import { useCssVars as _useCssVars, unref as _unref } from 'vue'
Expand Down
25 changes: 25 additions & 0 deletions packages/compiler-sfc/__tests__/cssVars.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,31 @@ describe('CSS vars injection', () => {
// color should only be injected once, even if it is twice in style
expect(content).toMatch(`_useCssVars(_ctx => ({
"${mockId}-color": (color)
})`)
assertCode(content)
})

test('should work with w/ complex expression', () => {
const { content } = compileSFCScript(
`<script setup>
let a = 100
let b = 200
</script>\n` +
`<style>
div {
color: v-bind((a + b) / 2 + 'px' );
}
div {
color: v-bind ((a + b) / 2 + 'px' );
}
p {
color: v-bind(((a + b)) / (2 * a));
}
</style>`
)
expect(content).toMatch(`_useCssVars(_ctx => ({
"${mockId}-_a___b____2____px__": ((_unref(a) + _unref(b)) / 2 + 'px' ),
"${mockId}-__a___b______2___a_": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
})`)
assertCode(content)
})
Expand Down
2 changes: 1 addition & 1 deletion packages/compiler-sfc/src/cssVars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import hash from 'hash-sum'

export const CSS_VARS_HELPER = `useCssVars`
export const cssVarRE =
/\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g
/\bv-bind\s*\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^;]*))\s*\)/g

export function genCssVarsFromList(
vars: string[],
Expand Down

0 comments on commit 95d49bf

Please sign in to comment.