[csswg-drafts] [css-cascade] Clarification on cascade order for font shorthand property (#9744)

brad-mccormick has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-cascade] Clarification on cascade order for font shorthand property ==
I'm looking for clarification on expected behavior when attempting to redefine a CSS custom property defined as a sub property of a font shorthand property. I'm not sure if this would be related to css-cascade or css-font.

In the following example we have defined some custom properties at the :root scope that ultimately are used to construct a typography custom property --font-body-medium-1. That property is then set at the inner class and applied to the div. The font size is also overriden in .inner, however no properties of --font-body-medium-1 can be overriden in this method. I expected that --font-body-medium-1 would be expanded in place in the font property, exposing those sub properties for override via cascade. It seems they are taken out of the cascade or are out of order. What is the expected behavior in this case? This feels like a bug.

```
:root {
  --font-weight-500: 500;
  --font-size-350: 14px;
  --font-line-height-500: 20px;
  --font-family-sans: 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif;
  --font-family-primary: var(--font-family-sans) ;
  --font-body-medium-1: var(--font-weight-500) var(--font-size-350)/var(--font-line-height-500) var(--font-family-primary);
}

.inner {
  --font-size-350: 24px;
  font: var(--font-body-medium-1);
}
```

```
<div class="outer">
  <div class="inner">Some text...</div>
</div>
```




Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9744 using your GitHub account


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

Received on Thursday, 21 December 2023 17:57:07 UTC