Error when using calc() and CSS v-bind()

[ota-meshi]

Version

3.2.28

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Open the link to SFC playground

What is expected?

I expected the div element to be displayed.
I also expected the following CSS v-bind() to be available.

  div {
    width: calc(v-bind(a) - 3px);
  }

What is actually happening?

SyntaxError.

SyntaxError: Error parsing JavaScript expression: Identifier directly after number. (2:30)
    at Vt (https://sfc.vuejs.org/assets/vendor.4d121121.js:2:8418)
    at Tn (https://sfc.vuejs.org/assets/vendor.4d121121.js:24:697)
    at dT (https://sfc.vuejs.org/assets/vendor.4d121121.js:30:601)
    at Module.T6 [as compileScript] (https://sfc.vuejs.org/assets/vendor.4d121121.js:95:3)
    at cP (https://sfc.vuejs.org/assets/vendor.4d121121.js:609:193)
    at m0 (https://sfc.vuejs.org/assets/vendor.4d121121.js:605:7432)

---

It works when we change the version to v3.2.27 on Playground.

Or, if we change the CSS to the following, it will work.

  div {
    width: calc(v-bind('a') - 3px);
  }