Material-ui: CSS.escape polyfill warning when upgrading to beta.17

[gnapse]

After upgrading from 1.0.0-beta.16 to beta.17, I run the tests and even though they all pass, I get a very large number of warnings like the following:

console.error node_modules/warning/warning.js:51
  Warning: [JSS] CSS.escape polyfill in DEV mode is required in this browser, check out https://github.com/mathiasbynens/CSS.escape

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

This warning should not appear while running tests.

Current Behavior

The warning message above appears a very large number of times in the console while running all the tests.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.17 |
| React | 16.0.0 |
| browser | jest |

[oliviertassinari]

browser jest

@gnapse Oh boy. It's coming from https://github.com/cssinjs/jss/pull/625. It's not Material-UI related. cc @kof

[gnapse]

I suspected it was not material-ui itself, but I had no idea how to detect where it really came from, that's why I raised the issue here. Thanks!

[gnapse]

However, I'm not sure I understand what's the fix. I see that the issue you link from the other project is already merged. So how do I get this fixed in my app then?

[oliviertassinari]

@kof I fear everybody is gonna have to install the polyfill for the test environment. Should we reconsider the current tradeoff in the light of this new information?

[kof]

What if we introduce a "cheap polyfill" using the regex right in the MUI if there is no in the browser?

[oliviertassinari]

if there is no in the browser?

@kof Let's take Material-UI test suite as an example. We simulate a browser environment. It's what most people do with enzyme to use the mount() API. I can't see how the detection logic will work.

[kof]

Detection of CSS.escape is easy. It is if (typeof CSS === 'object' && CSS.escape)

[oliviertassinari]

@kof Oh. I have misunderstood what you were saying. So, we would use CSS.escape if available, otherwise we use a cheap cleaning RegExp? This sounds like a great tradeoff 💯 .

[kof]

if (typeof CSS === 'object' && CSS.escape) {
  return
}
if (typeof CSS === 'undefined') window.CSS = {}
CSS.escape = (str) => regexp

[kof]

If user includes a good polyfill, he will do it before mui loads anyways, so this is just to make sure we don't bother them.

[pantharshit00]

@kof I am having hard time adding a polyfill as it is not being detected and still warning is coming. I am including it like this. I am using your next js example

getContext.js

import 'css-escape'
// ....

It is even coming in the bundle before the warning message console log but no luck still.

[pantharshit00]

@kof anybody is still up on the issue

[oliviertassinari]

@pantharshit00 [email protected] has been released and do no longer require the polyfill.

[kof]

@oliviertassinari is mui automatically getting it? there has been a minor bump in between.

[oliviertassinari]

@kof I think it's people concern to reinstall or bump their .lock file.

[kof]

yes, just check if you get fresh install of mui that you also get latest react-jss and jss

[pantharshit00]

@kof thanks just did yarn upgrade --latest and it fixed the warning