SFC style tag v-bind shorthand #843

Hebilicious · 2024-10-18T02:17:08Z

Hebilicious
Oct 18, 2024

Hi @sxzz, hope you are doing well.
Lately I've been using this vue sfc feature a lot, here's an real-life example :

.Button {
  font-weight: v-bind("buttonStyle.fontWeight");
  background: v-bind("buttonStyle.background");
  color: v-bind("buttonStyle.color");
  border-radius: v-bind("buttonStyle.radius");
  width: v-bind("buttonStyle.width");
  height: v-bind("buttonStyle.height");
  padding: v-bind("buttonStyle.padding");
  font-size: v-bind("buttonStyle.fontSize");
  box-shadow: inset 0 0 0 1px v-bind("buttonStyle.borderColor");
}

This approach is definitely not very popular as a lot of people are on the utility class train, but for thoses of us who want to use regular css, it is really powerful and amazing and works with flawlessly with TS inference in vscode.

However this is a little verbose, and I would like to know if it would be possible to introduce a v-bind style shorthand, such as $().

For example, instead of

.SomeClass {
 color: v-bind("myColor")
}

we could have

.SomeClass {
color: $("myColor")
}

I am not familiar with the vue macros codebase/scope, so I don't know if this even possible or appropriate to suggest here. I do not know also if "$" is the best character to use, and I'm opened to better suggestions. If this is possible and can be implemented, we should definitely use a symbol that is as "safe" as possible, meaning that it shouldn't conflict with existing or future CSS syntax.

According to my findings, it is likely that in the future we would get custom function in css : w3c/csswg-drafts#9350, so maybe this should be something configurable ? Like a custom identifier that is set by default to "v-bind" and "$", but can be modified to anything the user want could be a smooth way to introduce this. That way we can warn users that this can conflict with 3rd party css code/libraries that would use the same identifier.

If this is outside of vue-macros scope, feel free to close this and I would appreciate if you could point me towards the right repo/discord to suggest such a feature, or if I should go ahead and try to implement it myself.

Thanks for your time and for your work on vue-macros and vue-vapor !

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

SFC style tag v-bind shorthand #843

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

SFC style tag v-bind shorthand #843

Uh oh!

Uh oh!

Hebilicious Oct 18, 2024

Replies: 0 comments

Hebilicious
Oct 18, 2024