v-bind for style is confusing

[karchung0930]

Hi, I saw the official doc for v-bind in CSS here:

The syntax works with <script setup>, and supports JavaScript expressions (must be wrapped in quotes)

It said the expression must be quoted.
But in Nuxt, there is actually no quote, see here.

When I try in Vue, it also actually work without quotes.
My question is, do we really need to quote it? If so, why it also works without quote but the doc said must be wrapped in quotes.

[edison1105]

The syntax works with <script setup>, and supports JavaScript expressions (must be wrapped in quotes)

It refers to the following use case

<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

[jacekkarczmarczyk]

The syntax works with <script setup>, and supports JavaScript expressions (must be wrapped in quotes)

It refers to the following use case

And the folowing use case is working without quotes

https://play.vuejs.org/#eNp9UsFOAjEQ/ZVJLwsJLAc94UKihoMe1KjHXrA7wGK3re0sYsj+u9MuIibInnbee319b9KduHYu3zQoxqIIyleOICA1bipNVTvrCXbgcQEtLLytIWNpJo2yJhDQCmuESeR7O2mAP2W19WPIPJbZQJq2L00x6nzZkQfC2uk5IU8AhQOl5yFMpDB2+NFYwiDFdIVa22IUM/zRnBIUoyNHHgN9aYSgrMOSEZcfjCFF3AfcDN8qU/ZSgzxh/SuOGw/8r86O5Nlez+3ijVMxEMS3mkW1zNfBGt5ncpBC2dpVGv2jo4rXJsW4847cnHt83ieMfIO8sQ5XK1TvJ/B12EZMiiePAf0GpThwNPdLpI6evTzglv8PZG3LRrP6DPmMweomZuxkN40pOfaRLqW9S6+iMsvXMNsSmvBTKgaNyjbppeCXcnum+m/ci/wyneN9ivYbwSfdaA==

[karchung0930]

Well, I'm more confused now.
The Vue collaborator already confirmed the doc is true and it's for that specific use case.
Interestingly, the official Vuetify member gave a inteactive example without quote and it's working.

[skirtles-code]

I believe the original intention was for the <style> section to parse as plain CSS, so that tools don't necessarily need to understand v-bind() to be able to parse the CSS. (e.g. tools that treat .vue files as HTML).

In that context, v-bind() is parsed as a function, similar to url(): https://developer.mozilla.org/en-US/docs/Web/CSS/url_function. Much like url(), the quotes aren't strictly required for simple values.

When v-bind() was first added, it was stricter about requiring quotes. Since then it has been adjusted to allow for the quotes to be omitted in more cases. I don't think the docs have been updated in a while, and it's a slight exaggeration to say that expressions must be wrapped in quotes, but they are still required with some more complex expressions. Even in some simpler cases, you may find that other tools fail to parse the CSS without the quotes. You also risk things breaking in future versions if you omit the quotes, as you might be in an edge case that works by chance rather than by design.

For reference, the original RFC is at https://github.com/vuejs/rfcs/blob/master/active-rfcs/0043-sfc-style-variables.md.

[karchung0930]

@skirtles-code Thanks for the detailed information and reference. Your statements are defenitely making sense.
What I found in the source code for Vue compiling the style is here.

It seems the compiler will normalize the expression and it actually works with or without the quote for now.
Personally I think the doc need to be updated where the quote is actually optional insetad of must be wrapped in quotes as it's misleading according to the source code for what the compiler is doing.