Define CSS variables directly via component option

[egoist]

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

<script>
export default {
  cssVariables() {
	return {
	  fontSize: this.size + 'px'
	}
  }
}
</script>

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

[danielwaltz]

Doesn't feels quite as elegant to me, but it definitely helps when you need to be explicit about the units you're using. I have no idea what the overhead might be, but I think having a css var available for every data item/prop would be nicer than having to be explicit about what is available to the style block. I think data/props with a number type could probably default to px as well (unless it's 0).

[brandonpittman]

This feels Vue-like. You have to tell the templates what components are available, so why not tell style blocks which variables are available?