Revert "Revert 87952b4 because of #1565"

This reverts commit 45f4463.

try to fix memory leak again

Author: seiyab

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.
@@ -273,11 +279,11 @@ import jss from 'jss'
 const styles = {
   container: {
     height: 200,
-    width: (data) => data.width
+    width: data => data.width
   },
   button: {
-    color: (data) => data.button.color,
-    padding: (data) => data.button.padding
+    color: data => data.button.color,
+    padding: data => data.button.padding
   }
 }
 
@@ -451,7 +457,7 @@ import {getDynamicStyles} from 'jss'
 const dynamicStyles = getDynamicStyles({
   button: {
     fontSize: 12,
-    color: (data) => data.color
+    color: data => data.color
   }
 })
 

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

@@ -1,13 +1,13 @@
 {
   "css-jss.js": {
-    "bundled": 59702,
-    "minified": 21830,
-    "gzipped": 7354
+    "bundled": 60057,
+    "minified": 21981,
+    "gzipped": 7379
   },
   "css-jss.min.js": {
-    "bundled": 58627,
-    "minified": 21207,
-    "gzipped": 7075
+    "bundled": 58982,
+    "minified": 21358,
+    "gzipped": 7098
   },
   "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/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

@@ -41,6 +41,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', () => {

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

@@ -1,23 +1,23 @@
 {
   "jss-plugin-nested.js": {
-    "bundled": 4456,
-    "minified": 1618,
-    "gzipped": 881
+    "bundled": 4505,
+    "minified": 1640,
+    "gzipped": 894
   },
   "jss-plugin-nested.min.js": {
-    "bundled": 4016,
-    "minified": 1402,
-    "gzipped": 754
+    "bundled": 4065,
+    "minified": 1424,
+    "gzipped": 768
   },
   "jss-plugin-nested.cjs.js": {
-    "bundled": 3729,
-    "minified": 1578,
-    "gzipped": 808
+    "bundled": 3776,
+    "minified": 1600,
+    "gzipped": 822
   },
   "jss-plugin-nested.esm.js": {
-    "bundled": 3310,
-    "minified": 1255,
-    "gzipped": 693,
+    "bundled": 3357,
+    "minified": 1277,
+    "gzipped": 705,
     "treeshaked": {
       "rollup": {
         "code": 64,

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

@@ -18,9 +18,8 @@ export default function jssNested() {
 
       warning(
         false,
-        `[JSS] Could not find the referenced rule "${key}" in "${
-          container.options.meta || container.toString()
-        }".`
+        `[JSS] Could not find the referenced rule "${key}" in "${container.options.meta ||
+          container.toString()}".`
       )
       return key
     }
@@ -88,7 +87,8 @@ export default function jssNested() {
         // Replace all $refs.
         selector = selector.replace(refRegExp, replaceRef)
 
-        container.addRule(selector, style[prop], {...options, selector})
+        const name = `${styleRule.key}-${prop}`
+        container.replaceRule(name, style[prop], {...options, selector})
       } else if (isNestedConditional) {
         // Place conditional right after the parent rule to ensure right ordering.
         container

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

@@ -9,7 +9,7 @@ import functionPlugin from 'jss-plugin-rule-value-function'
 import nested from '.'
 
 const settings = {
-  createGenerateId: () => (rule) => `${rule.key}-id`
+  createGenerateId: () => rule => `${rule.key}-id`
 }
 
 describe('jss-plugin-nested', () => {
@@ -127,6 +127,85 @@ describe('jss-plugin-nested', () => {
     })
   })
 
+  describe('identical nest', () => {
+    describe('single nest', () => {
+      let sheet
+
+      beforeEach(() => {
+        sheet = jss.createStyleSheet({
+          a: {
+            float: 'left',
+            '&': {color: 'blue'}
+          }
+        })
+      })
+
+      it('should add rule', () => {
+        expect(sheet.getRule('a')).to.not.be(undefined)
+      })
+
+      it('should generate correct CSS', () => {
+        expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          float: left;
+        }
+        .a-id {
+          color: blue;
+        }
+      `)
+      })
+    })
+
+    describe('deep nest', () => {
+      let sheet
+
+      beforeEach(() => {
+        sheet = jss.createStyleSheet({
+          a: {
+            float: 'left',
+            '&': {
+              color: 'blue',
+              '&': {
+                width: 0,
+                '&.b': {
+                  'z-index': 1,
+                  '&': {
+                    top: 0
+                  }
+                }
+              }
+            }
+          }
+        })
+      })
+
+      it('should add rules', () => {
+        expect(sheet.getRule('a')).to.not.be(undefined)
+        expect(sheet.getRule('.a-id.b')).to.not.be(undefined)
+      })
+
+      it('should generate correct CSS', () => {
+        expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          float: left;
+        }
+        .a-id {
+          color: blue;
+        }
+        .a-id {
+          width: 0;
+        }
+        .a-id.b {
+          z-index: 1;
+        }
+        .a-id.b {
+          top: 0;
+        }
+      `)
+      })
+    })
+  })
+
   describe('.addRules()', () => {
     let sheet