react: Bug: ReactDOM ignores invalid styles (e.g. unquoted font-family)

React version: 17.0.2

Steps To Reproduce

Just try to set fontFamily: "Exo 2" on styles.

https://codesandbox.io/s/react-exo-2-font-b80ij

If you chage it to “Exo”, the hot reload correctly sets “Exo” fontFamily on the dom.
If you next change again to “Exo 2”, it just leaves the dom with the previous value: “Exo”

This happens on latest Firefox, Chrome and Brave

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 29 (1 by maintainers)

Most upvoted comments

definitely! on the client-side, anyway (naturally).

CSS.supports('font-family', 'Exo 2') => false
CSS.supports('font-family', '"Exo 2"') => true
CSS.supports('font-family', 'Exo Foo') => true
CSS.supports('font-family', '"Lucida Grande", "Exo 2"') => true
CSS.supports('font-family', '"Lucida Grande", Exo 2') => false

CSS.supports('font', '"Lucida Grande", "Exo 2"') => false
CSS.supports('font', '12px "Lucida Grande", "Exo 2"') => true
CSS.supports('font', '12px "Lucida Grande", Exo 2') => false

it’s i think it’s a direct hook for the information we need. this can also validate Infinity and NaN just fine:

CSS.supports('margin-top', Infinity) => false
CSS.supports('margin-top', NaN) => false
CSS.supports('margin-top', 0) => true
CSS.supports('margin-top', '0') => true
CSS.supports('margin-top', '0p') => false
CSS.supports('margin-top', '0px') => true
CSS.supports('margin-top', ' 0px ') => true
CSS.supports('margin-top', ' 0 px ') => false

(not exactly related, but worth noting that it can also tell you about the browsers capabilities to parse whitespace or unitless values. also handles custom properties.)

if i can figure out how to reliably convert style property names like fontSize to css property names like font-size, then i can fix the weird hacks in the branch i shared.

kn0ll on Aug 12, 2021

I’m not sure about the info message content, because it’s still pretty unclear for me, so feel free to share your thoughts about it.

AlexRAV on May 16, 2021