FontWeight gets converted to string with px.

[yoohahn]

Steps to reproduce

1. Put your fontWeights in the theme ex. theme.typography.fontWeightRegular
2. Use it fontWeight: theme.typography.fontWeightRegular.
3. Change to fontWeight: theme.vars.typography.fontWeightRegular

Current behavior

fontWeight: theme.typography.fontWeightRegular
Result: font-weight: 400. ✔️

fontWeight: theme.vars.typography.fontWeightRegular
Result: font-weight: var(--typography-fontWeightRegular); ✔️
And that points to --typography-fontWeightRegular: 400px; ❌

Expected behavior

px should not be part of the var.

Context

No response

Your environment

npx @mui/envinfo

System:
OS: Linux 6.9 Pop!_OS 22.04 LTS
Binaries:
Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 129.0.6668.100
npmPackages:
@emotion/react: 11.13.3
@emotion/styled: 11.13.0
@mui/private-theming: 6.0.2
@mui/styled-engine: 6.0.2
@mui/system: 6.0.2
@mui/types: 7.2.16
@mui/utils: 6.0.2
@pigment-css/nextjs-plugin: ^0.0.24 => 0.0.24
@pigment-css/react: ^0.0.24 => 0.0.24
@pigment-css/unplugin: 0.0.24
@types/react: ^18 => 18.3.11
react: 19.0.0-rc-3edc000d-20240926 => 19.0.0-rc-3edc000d-20240926
react-dom: 19.0.0-rc-3edc000d-20240926 => 19.0.0-rc-3edc000d-20240926
typescript: ^5 => 5.6.2

Search keywords: vars,css,font-weight

[yoohahn]

Maybe not as intended. But typing it to a string works as expected. So just something to add docs to?

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@yoohahn How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[yoohahn]

Suggestion: Maybe the logic should check if the key starts or end with the key?
Don't think it will be to uncommon that people would like to have theme.typography.fontWeightBold, theme.typography.fontWeightNormal etc?

https://github.com/mui/pigment-css/blob/master/packages/pigment-css-react/src/utils/isUnitLess.ts#L54-L56