minor tweaks and docs for sheet.replaceRule

Author: kof

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.

packages/jss/.size-snapshot.json

@@ -1,30 +1,30 @@
 {
   "jss.js": {
-    "bundled": 64878,
-    "minified": 23187,
-    "gzipped": 7185
+    "bundled": 64920,
+    "minified": 23189,
+    "gzipped": 7183
   },
   "jss.min.js": {
-    "bundled": 63482,
-    "minified": 22418,
-    "gzipped": 6844
+    "bundled": 63524,
+    "minified": 22420,
+    "gzipped": 6842
   },
   "jss.cjs.js": {
-    "bundled": 60556,
-    "minified": 26215,
-    "gzipped": 7305
+    "bundled": 60598,
+    "minified": 26217,
+    "gzipped": 7301
   },
   "jss.esm.js": {
-    "bundled": 58928,
-    "minified": 24909,
-    "gzipped": 7138,
+    "bundled": 58970,
+    "minified": 24911,
+    "gzipped": 7135,
     "treeshaked": {
       "rollup": {
-        "code": 20173,
+        "code": 20175,
         "import_statements": 345
       },
       "webpack": {
-        "code": 21663
+        "code": 21665
       }
     }
   }

packages/jss/src/StyleSheet.js

@@ -90,11 +90,11 @@ export default class StyleSheet {
   /**
    * Replace a rule in the current stylesheet.
    */
-  replaceRule(name, decl, options) {
-    const oldRule = this.getRule(name)
-    if (!oldRule) return this.addRule(name, decl, options)
+  replaceRule(nameOrSelector, decl, options) {
+    const oldRule = this.rules.get(nameOrSelector)
+    if (!oldRule) return this.addRule(nameOrSelector, decl, options)
 
-    const newRule = this.rules.replace(name, decl, options)
+    const newRule = this.rules.replace(nameOrSelector, decl, options)
 
     if (newRule) {
       this.options.jss.plugins.onProcessRule(newRule)