diff --git a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
index c290eb6feec..49b0d712a7a 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
@@ -75,6 +75,7 @@ export default {
 
 _useCssVars(_ctx => ({
   \\"xxxxxxxx-foo\\": (_unref(foo)),
+  \\"xxxxxxxx-foo____px_\\": (_unref(foo) + 'px'),
   \\"xxxxxxxx-_a___b____2____px_\\": ((_unref(a) + _unref(b)) / 2 + 'px'),
   \\"xxxxxxxx-__a___b______2___a_\\": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
 }))
diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts
index f92852e859f..d9912f44b51 100644
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -210,6 +210,7 @@ describe('CSS vars injection', () => {
           p{
             width: calc(v-bind(foo) - 3px);
             height: calc(v-bind('foo') - 3px);
+            top: calc(v-bind(foo + 'px') - 3px);
           }
           div {
             color: v-bind((a + b) / 2 + 'px' );
@@ -224,6 +225,7 @@ describe('CSS vars injection', () => {
       )
       expect(content).toMatch(`_useCssVars(_ctx => ({
   "${mockId}-foo": (_unref(foo)),
+  "${mockId}-foo____px_": (_unref(foo) + 'px'),
   "${mockId}-_a___b____2____px_": ((_unref(a) + _unref(b)) / 2 + 'px'),
   "${mockId}-__a___b______2___a_": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
 })`)