Calculated CSS unit

[Sonnenuntergang]

Describe the problem

I really like svelte but there's one thing that gets on my nerves. I prefer creating my own components and not using a framework. When I want for example the border radius to be half of the height of the element, I have to manually create a JS function to calculate this.

Describe the proposed solution

I would like to have a custom css unit that is removed from CSS and added as a JS function which adds a style attribute. An example:

element {
   border-radius: 50rh;
}

That would mean half of the height of an element (rh for 'real height').
I imagine a compiled solution like this:

<element bind:this={ node } style=`border-radius: { node.offsetHeight * 0.5 }` />

Importance

would make my life easier

[adminy]

Technically svelte is a framework ... component libraries like daisy UI are a life saver actually ... but ok.

I think this would work in css for what you're trying to do:

element {
   border-radius: 9999px;
}

[Sonnenuntergang]

@adminy Thank you for your answer. That's a good solution. I've thought about any other use case for a unit like this but couldn't find one where it would be more elegant than with just normal CSS.