Subscribe on changes!

CSS: Getting the default/current property value via CSS functions

avatar
May 11th 2023

What problem does this feature solve?

My humble idea would be to make v-bind (or another CSS function) give default and current value (as well as unit) as parameters when using functions or computeds.

What the property looks like:

{
   default: "60",
   current: "70",
   unit: "px"
}

It allows for finetuning how we handle CSS in Vue, being able to modify values more freely and removes a lot of boilerplate, like waiting for the dom ref to load with onMounted, getting the CSS value and setting the computed style or what not.

What does the proposed API look like?

<script setup>
   const heightIncrementer =  computed(
      (property) => `${property.default + 10}${property.unit}`
   );
}
</script>

<template>
   <div class="sillyIdea">Something stupid</div>
</template>

<style scoped>
   .sillyIdea {
      height: v-bind(heightIncrementer);
   }
</style>