Error when using calc() and CSS v-bind()
Version
3.2.28
Reproduction link
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);
}