css style variable v-bind does not support complex expression with () in expression

[lidlanca]

Version

3.2.26

Reproduction link

sfc playground

Steps to reproduce

use ) in the v-bind expression to break parsing

passing expression

.myStyle { 
 v-bind( a+b/2 )
}

failing expression

.myStyle { 
 v-bind( (a+b)/2 )
}

What is expected?

the whole expression in v-bind should be extracted as the value for the css variable

What is actually happening?

regexp extraction fails when ) is encountered in the v-bind expression. (regexp based extraction)

[posva]

You need to wrap the expression with quotes as said in https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css

[lidlanca]

recommending the usage of

v-bind( '(a+b) + "px"' ) 

over

v-bind( (a + b) + 'px' )

misses the point of this issue.

it will be interesting to get some more feedback why there is no place to address what is pointed in this issue.
considering that JS expression are actually supported without quotes in v-bind ( excluding the ) for example)

A fix can still be done with an improved regexp expression ( no need for ast or a custom parser as mentioned in the original RFC) thanks to @edison1105 and his related PR

The docs and the implementation are not consistent,
these are all working and valid
v-bind(a + b)
v-bind(a.b.c)
v-bind(a.b.c / c.n.n)

in this issue we should either address the following

• A. improve DX, and restrict "complex" expressions to be in quotes to reflect the docs, error or warning
• B. fix the implementation to remove the need for quotes. regexp based solution exists.
• C. fix the documentation to point out that some JS expressions works without quotes and some with, and instruct to use quotes for the cases that don't work without it.

and more community feedback is welcomed

@Justineo can you please reopen this issue so we can be have some more community feedback.
thanks

edit: removed the usage of the word "silly"