Fix adding a value rule after adding an invalid one

packages/jss/.size-snapshot.json

@@ -1,30 +1,30 @@
 {
   "dist/jss.js": {
-    "bundled": 59266,
-    "minified": 22060,
-    "gzipped": 6635
+    "bundled": 59406,
+    "minified": 22046,
+    "gzipped": 6627
   },
   "dist/jss.min.js": {
-    "bundled": 57859,
-    "minified": 21262,
-    "gzipped": 6273
+    "bundled": 58029,
+    "minified": 21277,
+    "gzipped": 6279
   },
   "dist/jss.cjs.js": {
-    "bundled": 54337,
-    "minified": 23861,
-    "gzipped": 6659
+    "bundled": 54473,
+    "minified": 23847,
+    "gzipped": 6649
   },
   "dist/jss.esm.js": {
-    "bundled": 53821,
-    "minified": 23437,
-    "gzipped": 6570,
+    "bundled": 53957,
+    "minified": 23423,
+    "gzipped": 6559,
     "treeshaked": {
       "rollup": {
-        "code": 19321,
+        "code": 19336,
         "import_statements": 281
       },
       "webpack": {
-        "code": 20743
+        "code": 20758
       }
     }
   }

packages/jss/src/DomRenderer.js

@@ -260,8 +260,15 @@ const getNonce = memoize(
 const insertRule = (
   container: CSSStyleSheet | CSSMediaRule | CSSKeyframesRule,
   rule: string,
-  index?: number = container.cssRules.length
+  index?: number
 ): false | any => {
+  const maxIndex = container.cssRules.length
+  // In case previous insertion fails, passed index might be wrong
+  if (index === undefined || index > maxIndex) {
+    // eslint-disable-next-line no-param-reassign
+    index = maxIndex
+  }
+
   try {
     if ('insertRule' in container) {
       const c = ((container: any): CSSStyleSheet)
@@ -273,7 +280,7 @@ const insertRule = (
       c.appendRule(rule)
     }
   } catch (err) {
-    warning(false, `[JSS] Can not insert an unsupported rule \n${rule}`)
+    warning(false, `[JSS] ${err.message}`)
     return false
   }
   return container.cssRules[index]

packages/jss/tests/functional/sheet.js

@@ -164,6 +164,23 @@ describe('Functional: sheet', () => {
       sheet.attach()
       expect(rule.renderable).to.not.be(undefined)
     })
+
+    it('should warn if added rule is invalid', () => {
+      sheet = jss.createStyleSheet(null, {link: true})
+      const rule = sheet.addRule('a', {color: 'red'}, {selector: ':wrong'})
+      sheet.attach()
+      expect(spy.callCount).to.be(1)
+      expect(rule.renderable).to.be(undefined)
+    })
+
+    it('should insert a valid rule after an invalid one', () => {
+      sheet = jss.createStyleSheet(null, {link: true})
+      sheet.addRule('a', {color: 'red'}, {selector: ':wrong'})
+      const rule = sheet.addRule('b', {color: 'red'})
+      sheet.attach()
+      expect(spy.callCount).to.be(1)
+      expect(rule.renderable).to.not.be(undefined)
+    })
   })
 
   describe('Option {Renderer: null}', () => {

packages/react-jss/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/react-jss.js": {
-    "bundled": 128759,
-    "minified": 44373,
-    "gzipped": 13874
+    "bundled": 155401,
+    "minified": 51853,
+    "gzipped": 16093
   },
   "dist/react-jss.min.js": {
-    "bundled": 96372,
-    "minified": 34480,
-    "gzipped": 11091
+    "bundled": 98709,
+    "minified": 35224,
+    "gzipped": 11180
   },
   "dist/react-jss.cjs.js": {
     "bundled": 21204,