Re: [csswg-drafts] [css-values] Introduce `self()` function (#9459)

That makes sense. Someone else recommended I include declarative functions as a use case on this ticket, which is why I did.

Even without declarative functions in the picture, this code easier to reuse (simple copy & paste, more or less):

```css
@property --nested-radius {
  syntax: "<length> <length> <length> <length>";
  inherits: true;
  initial-value: 0px 0px 0px 0px;
}

.parent {
  /* we can implicitly use the below values without needing to explicitly
     set the border-radius or padding values as CSS custom properties */
  --nested-radius:
    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));
}

.some-descendant {
  border-radius: var(--nested-radius);
}
```

…than this:

```css
@property --nested-radius {
  syntax: "<length> <length> <length> <length>";
  inherits: true;
  initial-value: 0px 0px 0px 0px;
}

.parent {
  /* without self(), we need to explicitly declare padding and border-radius
      values as CSS custom properties in order to re-use them, meaning these
      types of values couldn't be provided by any 3rd-party lib without
      knowing your site and styles, as it can't inherit them */
  --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);
  --nested-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));
}

.some-descendant {
  border-radius: var(--nested-radius);
}
```

---

I know the circularity may be a huge hurdle to get over if it's even possible. Just trying to further explain the value and use case here.

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


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

Received on Friday, 20 October 2023 23:11:32 UTC