search

sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
78.05k stars 4.07k forks source link

Calculated CSS unit #12129

Closed Sonnenuntergang closed 1 month ago

Sonnenuntergang commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

@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.

dummdidumm commented 1 month ago

We're not going to add new CSS syntax for units that doesn't exist in the real world, therefore closing.