CSS: Getting the default/current property value via CSS functions
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>