Support for creating custom properties as functions

[mineclover]

Describe the feature request

Creating a style with a function already creates custom properties
There are two unnecessary actions

It is recommended that you skip these two unnecessary tasks if they are preceded by two dashes

1. In front of the name -- more
2. Perform var(--{name}) with name as key

example

dynamic: (color: string) => ({
    color: color,
    '--test': color,
  }),

These features make custom properties within more accessible

[mineclover]

Unnecessary properties occur when an approach to the declared --color-slot-1 inside the svg is assumed

[nmn]

This is an intentional part of the design to ensure consistency and to enable some important features in the future. There's also a potential performance improvement we can make with the current design.

1. Consistency - It is a very complicated edge-case to explain, and TBH, I've forgotten some of the details, but TLDR; inline styles having the highest specificity can cause some problems.
2. Future features - We're planning on polyfilling future/experimental CSS features using a CSS post-processor. Some of these features are reliant on knowing all possible values a variable can take. Inline styles are not part of the CSS file and would cause issues. With the current design, the post-processing step can detect when a variable has a dynamic value and handle/error on that as appropriate.
3. Performance - Variable values are normally inherited, and this increases the performance cost of using variables. With the new @property feature, it possible to mark certain variables as non-inheriting. Using this enables us to speed up the usage of variables that are created for dynamic values.