`Can not insert an unsupported rule` when using react-jss with dynamic values on chrome

Expected behavior: Using browser targeting CSS like: .button-class::-moz-focus-inner {} together with dynamic values react-jss should apply all rules on chrome.

Describe the bug: When using browser targeting CSS like: .button-class::-moz-focus-inner {} together with dynamic values on react-jss, breaks when using chrome. The console reports Warning: [JSS] Can not insert an unsupported rule... and chrome does not apply the browser targeting rule nor any rules with dynamic values.

You can find the reproduced issue in the Codesandbox below.

When using:

label: {
  fontSize: 16,
},

every rule is applied (including the ::-moz-focus-inner).

However, using:

label: ({ fontSize }) => ({
  fontSize,
}),

chrome does not insert: the ::-moz-focus-inner nor the label rule (or any other dynamically applied rule).

Codesandbox link: https://codesandbox.io/s/m5mzmlk26y

Versions:

• jss: 10.0.0-alpha.16
• react-jss: 10.0.0-alpha.16
• Browser [e.g. chrome, safari]: chrome v73.0.3683.103

[kof]

Duplicate of #1122, is fixed will be released next in the alpha

[kof]

::-moz-focus-inner is a firefox specific selector, I think we just need to make sure we don’t fail other rules if one rule can’t render, because in this case, that rule wouldn’t do anything in chrome and others anyways, it should justs fail silently like CSS usually does in such cases, without affecting other rules.