Re: [csswg-drafts] Declarative custom functions (#7490)

### A case for `self()`

Thinking through all the benefits of both declarative functions as well as the soonish-coming `inherit()` function, I think a `self()` function could be extremely useful to drive some styles based on other computed styles, without necessitating that all shared values flow through custom properties alone.

This would be extra useful in custom/declarative functions to derive styles from other values without needing to pass arguments at all in some cases.

One such example could be computing the natural nested `border-radius` for a descendant of another rounded element, which is essentially variable substitution already:

<details><summary><b>(expand/collapse source)</b></summary><br />

```html
<parent>
  <child></child>
</parent>
```
```css
parent {
  --br-tl: 30px;
  --br-tr: 48px;
  --br-br: 82px;
  --br-bl: 130px;
  --p-t: 20px;
  --p-b: 10px;
  --p-r: 26px;
  --p-l: 44px;
  border-radius: var(--br-tl) var(--br-tr) var(--br-br) var(--br-bl);
  padding: var(--p-t) var(--p-r) var(--p-b) var(--p-l);
}

child {
  border-radius: calc(var(--br-tl) - var(--p-t)) calc(var(--br-tr) - var(--p-r))
    calc(var(--br-br) - var(--p-b)) calc(var(--br-bl) - var(--p-l));
}
```

</details>

Using declarative functions and this new proposed `self()` function, this can be greatly simplified/abstracted:

<details><summary><b>(expand/collapse source)</b></summary><br />

```css
@custom-function --get-nested-radius {
  result: calc(self(border-top-left-radius) - self(padding-top))  calc(self(border-top-right-radius) - self(padding-right)) calc(self(border-bottom-right-radius) - self(padding-bottom)) calc(self(border-bottom-left-radius) - self(padding-left));
}

parent {
  border-radius: 30px 48px 82px 130px;
  padding: 20px 10px 26px 44px;
  --nested-radius: --get-nested-radius();
}

child {
  border-radius: var(--nested-radius);
}
```

</details>

To prevent circularity issues, no value deriving another value using `self()` could be used at the same selector level for a related property. For example, these would not work:

```css
* {
  padding-left: self(padding);
  padding: self(padding-left);
}
```

-- 
GitHub Notification of comment by brandonmcconnell
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7490#issuecomment-1756493200 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 11 October 2023 00:16:22 UTC