Overriding font namespace break font families parsing

[JacobBlana]

Version

1.2.3

What did you expect to happen?

When overriding defaults in font namespace --font-*: initial; and setting only --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; i just expected to have single font family in theme.json with "sans" slug and name.

What actually happens?

The theme.json output looks like this.

 "typography": {
      "defaultFontSizes": false,
      "customFontSize": false,
      "fontFamilies": [
        {
          "name": "sans);--font-sans",
          "slug": "sans);--font-sans",
          "fontFamily": "Inter,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji"
        }
      ],
      "fontSizes": [...]
}

Steps to reproduce

Set @theme like this.

@theme static {
    --font-*: initial;
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

From curiosity i started to play around with it.

When added new custom font it works partially:

@theme static {
    --font-*: initial;
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

"fontFamilies": [
    {
      "name": "sans);--font-sans",
      "slug": "sans);--font-sans",
      "fontFamily": "Inter,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji"
    },
    {
      "name": "body",
      "slug": "body",
      "fontFamily": "Inter,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji"
    }
 ],

When added mono (which is default tw font variant) or only custom one, both works correctly.

@theme static {
    --font-*: initial;
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

@theme static {
    --font-*: initial;
    --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

Also if it wasnt clear, it works just fine without the --font-*: initial; overriding.

System info

No response

Log output

Please confirm this isn't a support request.

Yes