margin: NaN crashes on Chrome 88

[oliviertassinari]

Expected behavior:

No crash

Describe the bug:

When rendering:

import * as React from "react";
import { createUseStyles } from "react-jss";

const useStyles = createUseStyles((t) => ({
  container: {
    margin: NaN
  }
}));

export default function App() {
  useStyles();
  return <div />;
}

Chrome 88 crashes. CSS.px(NaN) isn't flying well.

TypeError: Failed to execute 'px' on 'CSS': The provided double value is non-finite.

Codesandbox link:

https://codesandbox.io/s/react-jss-ts-forked-nl2rf?file=/src/App.tsx

Versions (please complete the following information):

• jss: 10.5.0
• Browser: Chrome >= 88

I have investigated the issue from https://github.com/mui-org/material-ui/issues/24519 and https://github.com/mui-org/material-ui/issues/24182. I'm not sure it's worth fixing here but I thought it would be interesting to report anyway.

It fails because typeof NaN === 'number':

https://github.com/cssinjs/jss/blob/94c8f6c7e5eee7ce04c31ea2f7e318a5d5b2a082/packages/jss-plugin-default-unit/src/index.js#L43

The fix should be straightforward.

[GearoidCollins]

We are experiencing this issue too. Happy to help out with testing if needed

[oliviertassinari]

Fix made in https://github.com/cssinjs/jss/pull/1446. At this point, it's outside of the control of Material-UI.

[kof]

Released https://github.com/cssinjs/jss/releases/tag/v10.5.1

[GearoidCollins]

Thanks @oliviertassinari & @kof, appreciate the work you guys did to figure this one!