Let's hack <style>

[egoist]

In:

<template>
  <h1>hello</h1>
</template>

<script>
export default {
  props: ['color', 'fontSize']
}
</script>

<style scoped>
h1 {
  color: eval("color");
  font-size: eval("fontSize * 2");
}
</style>

Out:

<template>
  <h1 :style="{'--v0': color, '--v1': fontSize * 2}">hello</h1>
</template>

<script>
export default {
  props: ['color', 'fontSize']
}
</script>

<style scoped>
h1 {
  color: var(--v0);
  font-size: var(--v1);
}
</style>

[atinux]

I love it

[IniZio]

or maybe interpolation like

<style scoped>
h1 {
  color: {{ color }};
  font-size: {{ fontSize * 2 }};
}
</style>

?

Edit: Not friendly for editors since it is invalid css

[egoist]

@IniZio I thought about that, but that's invalid CSS so editor may report errors.

[IniZio]

Guess eval is the way to go then 🤔

[danielwaltz]

I like this concept. I'm way more willing to adopt this method if I can continue using the style block in my SFCs.

Perhaps setting a new type will help make it more obvious to fresh eyes on the project what's going on too. Like <style lang="styled" scoped> or something like that.

[cainrus]

What do you think about auto-injection of css variables?

In:

<template>
  <h1>hello</h1>
</template>

<script>
export default {
  props: ['color', 'size'],
  data: () => ({ bgColor: 'red' }),
  computed: { fontSize() { return this.size + 'px';  } },
}
</script>

<style scoped>
h1 {
  color: var(--vm-color);
  font-size: var(--vm-fontSize);
  background-color: var(--vm-bgColor);
}
</style>

Out:

<template>
  <h1 :style="{'--vm-color': color, '--vm-fontSize': fontSize, '--vm-bgColor': bgColor}">hello</h1>
</template>

<script>
export default {
  props: ['color', 'size'],
  data: () => ({ bgColor: 'red' }),
  computed: { fontSize() { return this.size + 'px';  } },
}
</script>

<style scoped>
h1 {
  color: var(--vm-color);
  font-size: var(--vm-fontSize);
  background-color: var(--vm-bgColor);
}
</style>

[egoist]

@cainrus maybe something like this instead: #6