window.getComputedStyle equivalent style() function in CSS

[jd-solanki]

Note
I'm new to this repo & CSS spec so if I posted at wrong place or something wrong is at my side let me know. I just wanted to share this if this is possible via CSS.

Hi 👋🏻

I really love how CSS is evolving these days and really loved #CSSDay ❤️

I'm building UI framework Anu and needed some CSS magic at some point. These magic includes:

• currentBackgroundColor
• contrast-color
• and more...

I wanted to share the idea got recently on CSS functions. We already have currentColor & there's already proposal for currentBackgroundColor. If we at these with bird view it comes down to JS version window.getComputedStyle. With JS's window.getComputedStyle we can easily fullfil requirement of currentColor & currentBackgroundColor

If we have similar function in CSS, let's say style() then we don't need keywords like currentColor & currentBackgroundColor at all 😱

Syntax

property: style(<property>, <?optional-selector>)

border-color: style(color) /* same as currentColor */
border-color: color-mix(style(backgroundColor), teal, 50%) /* same as Una shared in [this](https://github.com/w3c/csswg-drafts/issues/5292) issue */

We can take it to the next level by adding support for selector and not limiting to current element's context:

/* Assume we want to increase the size of icon if title is provided in alert */

font-size: style(font-size, '& + div > .alert-title') /* just a complex selector */

IDK if this is technically possible but just sharing my thoughts. If this is possible this unlocks great possibilities for UI design.
There's also question on what about invalid values or circular dependencies discussed in #5292 or assingning invalida values to property.

[Loirooriol]

That's inherently circular. Basically a duplicate of #5729, see Tab's comment explaining the problem.
Note the circularity can be avoided by taking the styles from the parent element, that's #2864.
The selector idea also seems problematic: what if there are multiple elements matching the selector, what if they are descendants (circularity), etc.