Alternative to Verbose CSS variables

[d3dc]

It seems like there's an ongoing discussion on this so this issue might be redundant in the scope of things.

I guess the reason for the verbose naming is to avoid collision with the user's defined values and have a global "theme". If I have a one-off Card or similar, its a lot of typing --Card- in the style attribute.

It might be convenient to expose Component-level CSS variables as props just for that reason:

<script>
  export let borderRadius
</script>

<div style="--Card-border-radius: {borderRadius}">
</div>

edit: Hadn't seen https://github.com/sveltejs/rfcs/pull/13 yet...

[rob-balfre]

@d3dc yeah jury is still out on how we are gonna handle CSS vars. Will keep this open...