fix memory leak again

docs/jss-api.md

@@ -196,12 +196,18 @@ const sheet2 = jss.createStyleSheet({}, {index: 1, meta: 'sheet-2'}).attach()
 
 ## Add a rule to an existing Style Sheet
 
-`sheet.addRule([name], style, [options])`
+`sheet.addRule(nameOrSelector, style, [options])`
 
 This function will use [insertRule](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule) API if your Style Sheet is already attached to the DOM. In this case **you will not see this CSS Rule in the "Elements" view of the dev tools**. You can always verify correct rendering by using the selector on some DOM Node and watch styles applied as well as in the "Styles" inspector.
 
 If you use `addRule()` before you call `attach()`, styles will be rendered in one batch using `textContent` API which will not have the above-described side effect.
 
+## Replace a rule in an existing Style Sheet
+
+`sheet.replaceRule(nameOrSelector, style, [options])`
+
+Same as `sheet.addRule(...)` but replaces a rule with the same name if found.
+
 ### Options
 
 - `index` - index where the rule should be added, by default, rules get pushed at the end.

package.json

@@ -88,7 +88,7 @@
     "mocha": "^3.2.0",
     "npmlog": "^4.1.2",
     "pre-commit": "^1.1.3",
-    "prettier": "^1.13.5",
+    "prettier": "^2.4.1",
     "raf": "^3.4.0",
     "react": "^16.8.6",
     "react-test-renderer": "^16.8.6",

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

@@ -1,13 +1,13 @@
 {
   "css-jss.js": {
-    "bundled": 59702,
-    "minified": 21830,
-    "gzipped": 7354
+    "bundled": 60304,
+    "minified": 22038,
+    "gzipped": 7392
   },
   "css-jss.min.js": {
-    "bundled": 58627,
-    "minified": 21207,
-    "gzipped": 7075
+    "bundled": 59229,
+    "minified": 21415,
+    "gzipped": 7111
   },
   "css-jss.cjs.js": {
     "bundled": 2949,

packages/jss-plugin-global/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "jss-plugin-global.js": {
-    "bundled": 5002,
-    "minified": 2186,
-    "gzipped": 914
+    "bundled": 5308,
+    "minified": 2315,
+    "gzipped": 934
   },
   "jss-plugin-global.min.js": {
-    "bundled": 5002,
-    "minified": 2186,
-    "gzipped": 914
+    "bundled": 5308,
+    "minified": 2315,
+    "gzipped": 934
   },
   "jss-plugin-global.cjs.js": {
-    "bundled": 4277,
-    "minified": 2312,
-    "gzipped": 886
+    "bundled": 4565,
+    "minified": 2441,
+    "gzipped": 905
   },
   "jss-plugin-global.esm.js": {
-    "bundled": 3931,
-    "minified": 2038,
-    "gzipped": 783,
+    "bundled": 4219,
+    "minified": 2167,
+    "gzipped": 802,
     "treeshaked": {
       "rollup": {
         "code": 55,

packages/jss-plugin-global/package.json

@@ -36,7 +36,8 @@
     "check-snapshot": "node ../../scripts/match-snapshot.js"
   },
   "devDependencies": {
-    "jss-plugin-nested": "10.8.2"
+    "jss-plugin-nested": "10.8.2",
+    "jss-v10_8_0": "npm:jss@10.8.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.3.1",

packages/jss-plugin-global/src/index.js

@@ -41,6 +41,15 @@ class GlobalContainerRule {
     return rule
   }
 
+  /**
+   * Replace rule, run plugins.
+   */
+  replaceRule(name, style, options) {
+    const newRule = this.rules.replace(name, style, options)
+    if (newRule) this.options.jss.plugins.onProcessRule(newRule)
+    return newRule
+  }
+
   /**
    * Get index of a rule.
    */
@@ -146,7 +155,7 @@ export default function jssGlobal() {
       }
     }
 
-    if (options.scoped === false) {
+    if (!options.selector && options.scoped === false) {
       options.selector = name
     }
 

packages/jss-plugin-global/src/index.test.js

@@ -1,6 +1,7 @@
 import {stripIndent} from 'common-tags'
 import expect from 'expect.js'
 import {create} from 'jss'
+import {create as oldCreate} from 'jss-v10_8_0'
 import nested from 'jss-plugin-nested'
 
 import global from './index'
@@ -41,6 +42,94 @@ describe('jss-plugin-global', () => {
     it('should remove whitespaces', () => {
       expect(sheet.toString({format: false})).to.be('a{color:red;}body{color:green;}')
     })
+
+    describe('addRule', () => {
+      let globalRule
+      beforeEach(() => {
+        globalRule = sheet.getRule('@global')
+        globalRule.addRule('button', {margin: 0})
+        globalRule.addRule('li', {float: 'left'})
+      })
+
+      it('should add rule', () => {
+        expect(globalRule.getRule('button')).to.not.be(undefined)
+        expect(globalRule.getRule('li')).to.not.be(undefined)
+      })
+
+      it('should generate correct CSS', () => {
+        expect(sheet.toString()).to.be(stripIndent`
+          a {
+            color: red;
+          }
+          body {
+            color: green;
+          }
+          button {
+            margin: 0;
+          }
+          li {
+            float: left;
+          }
+        `)
+      })
+    })
+
+    describe('replaceRule', () => {
+      let globalRule
+      let previousA
+      beforeEach(() => {
+        globalRule = sheet.getRule('@global')
+        previousA = globalRule.getRule('a')
+        globalRule.replaceRule('a', {color: 'yellow'})
+        globalRule.replaceRule('li', {float: 'left'})
+      })
+
+      it('should replace and add rule', () => {
+        expect(globalRule.getRule('a')).to.not.be(previousA)
+        expect(globalRule.getRule('li')).to.not.be(undefined)
+      })
+
+      it('should generate correct CSS', () => {
+        expect(sheet.toString()).to.be(stripIndent`
+          a {
+            color: yellow;
+          }
+          body {
+            color: green;
+          }
+          li {
+            float: left;
+          }
+        `)
+      })
+    })
+
+    describe('addRule / replaceRule with selector', () => {
+      let globalRule
+      beforeEach(() => {
+        globalRule = sheet.getRule('@global')
+        globalRule.addRule('arbitrary-name-1', {color: 'red'}, {selector: 'span'})
+        globalRule.replaceRule('arbitrary-name-2', {float: 'left'}, {selector: 'ul'})
+        globalRule.replaceRule('a', {display: 'block'}, {selector: 'div'})
+      })
+
+      it('should generate correct CSS', () => {
+        expect(sheet.toString()).to.be(stripIndent`
+          div {
+            display: block;
+          }
+          body {
+            color: green;
+          }
+          span {
+            color: red;
+          }
+          ul {
+            float: left;
+          }
+        `)
+      })
+    })
   })
 
   describe('@global linked', () => {
@@ -420,4 +509,33 @@ describe('jss-plugin-global', () => {
       )
     })
   })
+
+  describe('backward compatibility', () => {
+    let oldJss
+
+    beforeEach(() => { 
+      oldJss = oldCreate(settings).use(global())
+    })
+
+    it('should replace rule on replaceRule even if jss core doesn\'t implement replaceRule', () => { 
+      // this is because RuleList that plugin uses has same version with plugin according to dependency
+      // even if user accidentally use newer plugin with older jss-core
+
+      const sheet = oldJss.createStyleSheet({
+        '@global': {
+          a: {color: 'red'},
+          body: {top: '0px'},
+        }
+      })
+      sheet.getRule('@global').replaceRule('a', {color: 'blue'})
+      expect(sheet.toString()).to.be(stripIndent`
+        a {
+          color: blue;
+        }
+        body {
+          top: 0px;
+        }
+      `)
+    })
+  })
 })

packages/jss-plugin-nested/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "jss-plugin-nested.js": {
-    "bundled": 4456,
-    "minified": 1618,
-    "gzipped": 881
+    "bundled": 4752,
+    "minified": 1697,
+    "gzipped": 907
   },
   "jss-plugin-nested.min.js": {
-    "bundled": 4016,
-    "minified": 1402,
-    "gzipped": 754
+    "bundled": 4312,
+    "minified": 1481,
+    "gzipped": 779
   },
   "jss-plugin-nested.cjs.js": {
-    "bundled": 3729,
-    "minified": 1578,
-    "gzipped": 808
+    "bundled": 4029,
+    "minified": 1681,
+    "gzipped": 835
   },
   "jss-plugin-nested.esm.js": {
-    "bundled": 3310,
-    "minified": 1255,
-    "gzipped": 693,
+    "bundled": 3590,
+    "minified": 1341,
+    "gzipped": 719,
     "treeshaked": {
       "rollup": {
         "code": 64,

packages/jss-plugin-nested/package.json

@@ -36,7 +36,9 @@
     "check-snapshot": "node ../../scripts/match-snapshot.js"
   },
   "devDependencies": {
-    "jss-plugin-rule-value-function": "10.8.2"
+    "jss-plugin-rule-value-function": "10.8.2",
+    "jss-plugin-global": "10.8.2",
+    "jss-v10_8_0": "npm:jss@10.8.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.3.1",

packages/jss-plugin-nested/src/index.js

@@ -88,7 +88,13 @@ export default function jssNested() {
         // Replace all $refs.
         selector = selector.replace(refRegExp, replaceRef)
 
-        container.addRule(selector, style[prop], {...options, selector})
+        const name = `${styleRule.key}-${prop}`
+        if ('replaceRule' in container) {
+          // for backward compatibility
+          container.replaceRule(name, style[prop], {...options, selector})
+        } else {
+          container.addRule(name, style[prop], {...options, selector})
+        }
       } else if (isNestedConditional) {
         // Place conditional right after the parent rule to ensure right ordering.
         container