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

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

Closed
lidlanca opened this issue Dec 14, 2021 · 4 comments · Fixed by #5114
Closed

Comments

@lidlanca
Copy link
Contributor

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
Copy link
Member

posva commented Dec 15, 2021

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

@posva posva closed this as completed Dec 15, 2021
@lidlanca
Copy link
Contributor Author

lidlanca commented Dec 15, 2021

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"

@caozhong1996

This comment has been minimized.

@Justineo

This comment has been minimized.

@yyx990803 yyx990803 reopened this Jan 21, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Oct 4, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants