Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(cssVars): cssVars work with complex expression #5114

Merged
merged 2 commits into from Jan 21, 2022
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 21 additions & 0 deletions packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
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
22 changes: 22 additions & 0 deletions packages/compiler-sfc/__tests__/cssVars.spec.ts
Expand Up @@ -195,6 +195,28 @@ 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' );
}
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
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*\)/g
edison1105 marked this conversation as resolved.
Show resolved Hide resolved

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