jss-isolate - npm Package Compare versions

Comparing version 2.0.1 to 3.0.0

changelog.md

@@ -1,3 +0,15 @@
-## 2.0.1 / 2016-12-09
+## 3.0.0 / 2017-04-25
 
+- support JSS 7
+- improve debounce performance
+- added new values for option `isolate`
+
+## 2.1.0 / 2017-01-19
+
+- `jss.use(isolate({isolate: false})` - will not isolate any rule by default, to isolate you will need to set isolate: true on a sheet or on the rule.
+
+- `jss.use(isolate({isolate: 'root'})` - will isolate automatically only rules with name "root" or any other name you want to use. This allows children in this component to inherit inheritable values, but components which have own roots will be isolated, so that inheritance doesn't spread to all children.
+
+## 2.0.1 / 2017-01-05
+
 - fixed isolate: false with jss-nested (cssinjs/jss#401)
@@ -4,0 +16,0 @@

dist/jss-isolate.js

@@ -55,3 +55,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /* 0 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
 
@@ -68,5 +68,5 @@ 'use strict';
 	
-	var _reset = __webpack_require__(1);
+	var _inherited = __webpack_require__(1);
 	
-	var _reset2 = _interopRequireDefault(_reset);
+	var _inherited2 = _interopRequireDefault(_inherited);
 	
@@ -76,3 +76,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 	var debounce = function debounce(fn) {
-	  var timeoutId = void 0;
+	  var pending = false;
 	  return function () {
@@ -83,5 +83,7 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 	
-	    clearTimeout(timeoutId);
-	    timeoutId = setTimeout(function () {
-	      return fn.apply(undefined, args);
+	    if (pending) return;
+	    pending = true;
+	    setTimeout(function () {
+	      fn.apply(undefined, args);
+	      pending = false;
 	    });
@@ -95,22 +97,49 @@ };
 	
+	var getReset = function getReset() {
+	  var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'inherited';
+	
+	  switch (option) {
+	    case 'inherited':
+	      return _inherited2['default'];
+	    default:
+	      // If option is an object, merge it with the `inherited` props.
+	      return _extends({}, _inherited2['default'], option);
+	  }
+	};
+	
 	function jssIsolate() {
 	  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 	
-	  var sheet = null;
+	  var globalIsolate = options.isolate == null ? true : options.isolate;
+	  var selectors = [];
+	  var resetSheet = null;
 	  var resetRule = void 0;
-	  var selectors = [];
 	
-	  return function (rule) {
-	    if (rule.type !== 'regular') return;
-	    if (!rule.options.sheet) return;
-	    if (rule.options.sheet === sheet) return;
-	    if (rule.options.sheet.options.isolate === false) return;
-	    if (rule.options.parent && (rule.options.parent.type === 'keyframe' || rule.options.parent.type === 'conditional')) return;
-	    if (rule.style && rule.style.isolate === false) {
+	  function onProcessRule(rule, sheet) {
+	    if (rule.type !== 'regular' || !sheet || sheet === resetSheet || !rule.style) return;
+	
+	    var parent = rule.options.parent;
+	
+	    if (parent && (parent.type === 'keyframe' || parent.type === 'conditional')) {
+	      return;
+	    }
+	
+	    var isolate = globalIsolate;
+	    if (sheet.options.isolate != null) isolate = sheet.options.isolate;
+	    if (rule.style.isolate != null) {
+	      isolate = rule.style.isolate;
 	      delete rule.style.isolate;
+	    }
+	
+	    if (isolate === false) return;
+	
+	    // Option `isolate` may be for e.g. `{isolate: 'root'}`.
+	    // In this case it must match the rule name in order to isolate it.
+	    if (isolate !== rule.name && typeof isolate === 'string') {
 	      return;
 	    }
+	
 	    // Create a separate style sheet once and use it for all rules.
-	    if (!sheet && rule.options.jss) {
-	      sheet = rule.options.jss.createStyleSheet({}, {
+	    if (!resetSheet && rule.options.jss) {
+	      resetSheet = rule.options.jss.createStyleSheet({}, {
 	        link: true,
@@ -122,5 +151,4 @@ meta: 'jss-isolate',
 	      });
-	      var mergedReset = options.reset ? _extends({}, _reset2['default'], options.reset) : _reset2['default'];
-	      resetRule = sheet.addRule('reset', mergedReset);
-	      sheet.attach();
+	      resetRule = resetSheet.addRule('reset', getReset(options.reset));
+	      resetSheet.attach();
 	    }
@@ -131,8 +159,10 @@ if (selectors.indexOf(rule.selector) === -1) {
 	    setSelector(resetRule, selectors);
-	  };
+	  }
+	
+	  return { onProcessRule: onProcessRule };
 	}
 
-/***/ },
+/***/ }),
 /* 1 */
-/***/ function(module, exports) {
+/***/ (function(module, exports) {
 
@@ -144,32 +174,49 @@ 'use strict';
 	});
+	/* eslint-disable quote-props */
+	/**
+	 * List of inheritable properties.
+	 *
+	 * Borrowed from https://github.com/suitcss/preprocessor/blob/master/lib/encapsulation.js
+	 */
 	exports['default'] = {
 	  'border-collapse': 'separate',
-	  'border-spacing': '0',
+	  'border-spacing': 0,
 	  'caption-side': 'top',
-	  cursor: 'auto',
-	  direction: 'ltr',
+	  'color': 'initial',
+	  'cursor': 'auto',
+	  'direction': 'initial',
 	  'empty-cells': 'show',
-	  'font-family': 'serif',
+	  'font': 'initial',
+	  'font-size-adjust': 'none',
+	  'font-family': 'initial',
 	  'font-size': 'medium',
 	  'font-style': 'normal',
+	  'font-stretch': 'normal',
 	  'font-variant': 'normal',
 	  'font-weight': 'normal',
-	  'font-stretch': 'normal',
+	  'letter-spacing': 'normal',
 	  'line-height': 'normal',
-	  hyphens: 'none',
-	  'letter-spacing': 'normal',
-	  'list-style': 'disc outside none',
-	  'tab-size': '8',
-	  'text-align': 'left',
+	  'list-style-image': 'none',
+	  'list-style-position': 'outside',
+	  'list-style-type': 'disc',
+	  'list-style': 'initial',
+	  'orphans': 2,
+	  'quotes': 'initial',
+	  'tab-size': 8,
+	  'text-align': 'initial',
 	  'text-align-last': 'auto',
-	  'text-indent': '0',
+	  'text-decoration-color': 'initial',
+	  'text-indent': 0,
+	  'text-justify': 'auto',
 	  'text-shadow': 'none',
 	  'text-transform': 'none',
-	  visibility: 'visible',
+	  'visibility': 'visible',
 	  'white-space': 'normal',
-	  widows: '2',
-	  'word-spacing': 'normal'
+	  'widows': 2,
+	  'word-break': 'normal',
+	  'word-spacing': 'normal',
+	  'word-wrap': 'normal'
 	};
 
-/***/ }
+/***/ })
 /******/ ])
@@ -176,0 +223,0 @@ });

dist/jss-isolate.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.jssIsolate=t():e.jssIsolate=t()}(this,function(){return function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function r(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=null,o=void 0,n=[];return function(r){if("regular"===r.type&&r.options.sheet&&r.options.sheet!==t&&r.options.sheet.options.isolate!==!1&&(!r.options.parent||"keyframe"!==r.options.parent.type&&"conditional"!==r.options.parent.type)){if(r.style&&r.style.isolate===!1)return void delete r.style.isolate;if(!t&&r.options.jss){t=r.options.jss.createStyleSheet({},{link:!0,meta:"jss-isolate",index:-(1/0)});var s=e.reset?i({},a.default,e.reset):a.default;o=t.addRule("reset",s),t.attach()}n.indexOf(r.selector)===-1&&n.push(r.selector),u(o,n)}}}Object.defineProperty(t,"__esModule",{value:!0});var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e};t.default=r;var s=o(1),a=n(s),l=function(e){var t=void 0;return function(){for(var o=arguments.length,n=Array(o),r=0;r<o;r++)n[r]=arguments[r];clearTimeout(t),t=setTimeout(function(){return e.apply(void 0,n)})}},u=l(function(e,t){e.selector=t.join(",\n")})},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={"border-collapse":"separate","border-spacing":"0","caption-side":"top",cursor:"auto",direction:"ltr","empty-cells":"show","font-family":"serif","font-size":"medium","font-style":"normal","font-variant":"normal","font-weight":"normal","font-stretch":"normal","line-height":"normal",hyphens:"none","letter-spacing":"normal","list-style":"disc outside none","tab-size":"8","text-align":"left","text-align-last":"auto","text-indent":"0","text-shadow":"none","text-transform":"none",visibility:"visible","white-space":"normal",widows:"2","word-spacing":"normal"}}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.jssIsolate=e():t.jssIsolate=e()}(this,function(){return function(t){function e(n){if(o[n])return o[n].exports;var i=o[n]={exports:{},id:n,loaded:!1};return t[n].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var o={};return e.m=t,e.c=o,e.p="",e(0)}([function(t,e,o){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function i(){function t(t,l){if("regular"===t.type&&l&&l!==i&&t.style){var s=t.options.parent;if(!s||"keyframe"!==s.type&&"conditional"!==s.type){var a=o;null!=l.options.isolate&&(a=l.options.isolate),null!=t.style.isolate&&(a=t.style.isolate,delete t.style.isolate),a!==!1&&(a!==t.name&&"string"==typeof a||(!i&&t.options.jss&&(i=t.options.jss.createStyleSheet({},{link:!0,meta:"jss-isolate",index:-(1/0)}),r=i.addRule("reset",c(e.reset)),i.attach()),n.indexOf(t.selector)===-1&&n.push(t.selector),u(r,n)))}}}var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=null==e.isolate||e.isolate,n=[],i=null,r=void 0;return{onProcessRule:t}}Object.defineProperty(e,"__esModule",{value:!0});var r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t};e.default=i;var l=o(1),s=n(l),a=function(t){var e=!1;return function(){for(var o=arguments.length,n=Array(o),i=0;i<o;i++)n[i]=arguments[i];e||(e=!0,setTimeout(function(){t.apply(void 0,n),e=!1}))}},u=a(function(t,e){t.selector=e.join(",\n")}),c=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"inherited";switch(t){case"inherited":return s.default;default:return r({},s.default,t)}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={"border-collapse":"separate","border-spacing":0,"caption-side":"top",color:"initial",cursor:"auto",direction:"initial","empty-cells":"show",font:"initial","font-size-adjust":"none","font-family":"initial","font-size":"medium","font-style":"normal","font-stretch":"normal","font-variant":"normal","font-weight":"normal","letter-spacing":"normal","line-height":"normal","list-style-image":"none","list-style-position":"outside","list-style-type":"disc","list-style":"initial",orphans:2,quotes:"initial","tab-size":8,"text-align":"initial","text-align-last":"auto","text-decoration-color":"initial","text-indent":0,"text-justify":"auto","text-shadow":"none","text-transform":"none",visibility:"visible","white-space":"normal",widows:2,"word-break":"normal","word-spacing":"normal","word-wrap":"normal"}}])});
 //# sourceMappingURL=jss-isolate.min.js.map

lib/index.js

@@ -11,5 +11,5 @@ 'use strict';
 
-var _reset = require('./reset');
+var _inherited = require('./inherited');
 
-var _reset2 = _interopRequireDefault(_reset);
+var _inherited2 = _interopRequireDefault(_inherited);
 
@@ -19,3 +19,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 var debounce = function debounce(fn) {
-  var timeoutId = void 0;
+  var pending = false;
   return function () {
@@ -26,5 +26,7 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(function () {
-      return fn.apply(undefined, args);
+    if (pending) return;
+    pending = true;
+    setTimeout(function () {
+      fn.apply(undefined, args);
+      pending = false;
     });
@@ -38,22 +40,49 @@ };
 
+var getReset = function getReset() {
+  var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'inherited';
+
+  switch (option) {
+    case 'inherited':
+      return _inherited2['default'];
+    default:
+      // If option is an object, merge it with the `inherited` props.
+      return _extends({}, _inherited2['default'], option);
+  }
+};
+
 function jssIsolate() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-  var sheet = null;
+  var globalIsolate = options.isolate == null ? true : options.isolate;
+  var selectors = [];
+  var resetSheet = null;
   var resetRule = void 0;
-  var selectors = [];
 
-  return function (rule) {
-    if (rule.type !== 'regular') return;
-    if (!rule.options.sheet) return;
-    if (rule.options.sheet === sheet) return;
-    if (rule.options.sheet.options.isolate === false) return;
-    if (rule.options.parent && (rule.options.parent.type === 'keyframe' || rule.options.parent.type === 'conditional')) return;
-    if (rule.style && rule.style.isolate === false) {
+  function onProcessRule(rule, sheet) {
+    if (rule.type !== 'regular' || !sheet || sheet === resetSheet || !rule.style) return;
+
+    var parent = rule.options.parent;
+
+    if (parent && (parent.type === 'keyframe' || parent.type === 'conditional')) {
+      return;
+    }
+
+    var isolate = globalIsolate;
+    if (sheet.options.isolate != null) isolate = sheet.options.isolate;
+    if (rule.style.isolate != null) {
+      isolate = rule.style.isolate;
       delete rule.style.isolate;
+    }
+
+    if (isolate === false) return;
+
+    // Option `isolate` may be for e.g. `{isolate: 'root'}`.
+    // In this case it must match the rule name in order to isolate it.
+    if (isolate !== rule.name && typeof isolate === 'string') {
       return;
     }
+
     // Create a separate style sheet once and use it for all rules.
-    if (!sheet && rule.options.jss) {
-      sheet = rule.options.jss.createStyleSheet({}, {
+    if (!resetSheet && rule.options.jss) {
+      resetSheet = rule.options.jss.createStyleSheet({}, {
         link: true,
@@ -65,5 +94,4 @@ meta: 'jss-isolate',
       });
-      var mergedReset = options.reset ? _extends({}, _reset2['default'], options.reset) : _reset2['default'];
-      resetRule = sheet.addRule('reset', mergedReset);
-      sheet.attach();
+      resetRule = resetSheet.addRule('reset', getReset(options.reset));
+      resetSheet.attach();
     }
@@ -74,3 +102,5 @@ if (selectors.indexOf(rule.selector) === -1) {
     setSelector(resetRule, selectors);
-  };
+  }
+
+  return { onProcessRule: onProcessRule };
 }

lib/index.test.js

@@ -89,7 +89,7 @@ 'use strict';
       (0, _expect2['default'])(resetRule.prop('border-collapse')).to.be('separate');
-      (0, _expect2['default'])(resetRule.prop('font-family')).to.be('serif');
+      (0, _expect2['default'])(resetRule.prop('font-family')).to.be('initial');
     });
   });
 
-  describe('works in multiple stylesheets', function () {
+  describe('works in multiple StyleSheets', function () {
     var sheet1 = void 0;
@@ -119,3 +119,22 @@ var sheet2 = void 0;
 
-  describe('ignores rules if they are ignored in stylesheet options', function () {
+  describe('global option "isolate"', function () {
+    beforeEach(function (done) {
+      jss = (0, _jss.create)().use((0, _index2['default'])({
+        isolate: false
+      }));
+
+      jss.createStyleSheet({
+        a: {
+          color: 'blue'
+        }
+      });
+      setTimeout(done);
+    });
+
+    it('should use global option', function () {
+      (0, _expect2['default'])(_jss.sheets.registry[0].getRule('reset')).to.be(undefined);
+    });
+  });
+
+  describe('ignores rules if they are ignored in StyleSheet options', function () {
     var sheet1 = void 0;
@@ -145,2 +164,43 @@ var sheet2 = void 0;
 
+  describe('isolate rules if they have isolate: true even if StyleSheet options is isolate: false', function () {
+    var sheet = void 0;
+
+    beforeEach(function (done) {
+      sheet = jss.createStyleSheet({
+        link: {
+          isolate: true,
+          color: 'blue'
+        }
+      }, { isolate: false });
+      setTimeout(done);
+    });
+
+    it('should add selectors to the reset rule', function () {
+      var resetRule = _jss.sheets.registry[0].getRule('reset');
+      (0, _expect2['default'])(resetRule.selector).to.contain(sheet.classes.link);
+    });
+  });
+
+  describe('isolate option as a string', function () {
+    var sheet = void 0;
+
+    beforeEach(function (done) {
+      sheet = jss.createStyleSheet({
+        root: {
+          color: 'blue'
+        },
+        a: {
+          color: 'red'
+        }
+      }, { isolate: 'root' });
+      setTimeout(done);
+    });
+
+    it('should only isolate rules with matching name', function () {
+      var resetRule = _jss.sheets.registry[0].getRule('reset');
+      (0, _expect2['default'])(resetRule.selector).to.contain(sheet.classes.root);
+      (0, _expect2['default'])(resetRule.selector).not.to.contain(sheet.classes.a);
+    });
+  });
+
   describe('ignore rules if property isolate is set to false', function () {
@@ -196,3 +256,3 @@ var sheet = void 0;
 
-  describe('option "reset"', function () {
+  describe('option "reset={width}" with custom props', function () {
     beforeEach(function (done) {
@@ -199,0 +259,0 @@ jss = (0, _jss.create)().use((0, _index2['default'])({

package.json

 {
   "name": "jss-isolate",
-  "description": "True rules isolation through automatic inheritable properties reset.",
-  "version": "2.0.1",
+  "description": "True rules isolation through automatic properties reset.",
+  "version": "3.0.0",
   "author": {
@@ -79,3 +79,3 @@ "name": "Maksim Koretskiy",
   "peerDependencies": {
-    "jss": "^6.0.0"
+    "jss": "^7.0.0"
   },
@@ -82,0 +82,0 @@ "lint-staged": {

readme.md

@@ -1,4 +0,6 @@
-# True rules isolation through automatic inheritable properties reset
+# True rules isolation through automatic properties reset
 
-There is a category of css properties named 'inheritable'. It means that these properties apply to the child nodes from parent nodes. See [this article](
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
+Some of the CSS properties are inheritable. It means that these properties apply to the child nodes from parent nodes. See [this article](
 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance) for more details.
@@ -8,4 +10,6 @@
 
-This plugin protects styles from inheritance. It automatically creates a reset rule and applies it to every user's rule.
+This plugin protects styles from inheritance. It automatically creates a reset rule and applies to every user's rule.
 
+Optionally you can also reset non-inherited properties, which would lead to even stronger isolation, as a protection against "greedy" selectors.
+
 Make sure you read [how to use
@@ -15,6 +19,2 @@ plugins](https://github.com/cssinjs/jss/blob/master/docs/setup.md#setup-with-plugins)
 
-[Demo](http://cssinjs.github.io/examples/index.html#plugin-jss-isolate)
-
-[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
-
 ## Usage example
@@ -43,12 +43,51 @@
 
-## Disable isolation locally.
+## Option `isolate`
 
-There are 2 ways to avoid isolation if you want to.
+Option `isolate` can be a `boolean` or a `string`.
+The default value is `true`, but you can override it in 3 different layers.
+For string value see [Isolation by convention](#isolation-by-convention).
 
-1. For a rule
+1. Globally for all StyleSheets:
 
+    ```javascript
+    jss.use(isolate({
+      isolate: false
+    }))
+
+    const styles = {
+      // Isolated.
+      button: {
+        isolate: true,
+        color: 'red'
+      },
+      // Not isolated.
+      a: {
+        color: 'green'
+      }
+    }
+    ```
+1. For a specific StyleSheet:
+
+    ```javascript
+    const styles = {
+      // Isolated.
+      root: {
+        isolate: true,
+        color: 'red'
+      },
+      // Not isolated.
+      a: {
+        color: 'green'
+      }
+    }
+
+    jss.createStyleSheet(styles, {isolate: false})
+    ```
+1. For a specific Rule:
+
   ```javascript
   const styles = {
     button: {
-      isolate: false
+      isolate: false,
+      color: 'red'
     }
@@ -58,12 +97,30 @@ }
 
-1. For a Style Sheet
+## Isolation by convention
 
-  ```javascript
-  jss.createStyleSheet(styles, {isolate: false})
-  ```
+You can assign any string to the `isolate` option. It will be used to match a rule name to isolate. All other rules will remain unisolated.
 
-## Custom reset.
+```javascript
+jss.use(isolate({
+  // Will match rule names `root` in all StyleSheets.
+  isolate: 'root'
+}))
 
-If you want to pass additional properties that need to be resetted.
+const styles = {
+  // Isolated.
+  root: {
+    color: 'red'
+  },
+  // Not isolated.
+  a: {
+    color: 'green'
+  }
+}
+```
 
+## Option `reset`
+
+Default value for `reset` option is `inherited`.
+
+If you want to reset some properties additionally to `inherited` once, you can pass a map of props-values. For e.g. you can set `box-sizing` to be `border-box` by default for every isolated rule without messing around with greedy selectors like this: `* {box-sizing: border-box}`.
+
 ```javascript
@@ -77,6 +134,10 @@ jss.use(isolate({
 
-## Inheritable properties.
+## Demo
 
-A full list of currently resetted properties is [here](./src/reset.js).
+[Simple](http://cssinjs.github.io/examples/plugins/jss-isolate/simple/index.html)
 
+## Reseted properties
+
+Here are all [inherited](./src/inherited.js) and all [non-inherited](./src/nonInherited.js) properties we reset.
+
 ## Issues
@@ -83,0 +144,0 @@

tests/index.js

@@ -11,5 +11,5 @@ 'use strict';
 
-var _reset = require('./reset');
+var _inherited = require('./inherited');
 
-var _reset2 = _interopRequireDefault(_reset);
+var _inherited2 = _interopRequireDefault(_inherited);
 
@@ -19,3 +19,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 var debounce = function debounce(fn) {
-  var timeoutId = void 0;
+  var pending = false;
   return function () {
@@ -26,5 +26,7 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(function () {
-      return fn.apply(undefined, args);
+    if (pending) return;
+    pending = true;
+    setTimeout(function () {
+      fn.apply(undefined, args);
+      pending = false;
     });
@@ -38,22 +40,49 @@ };
 
+var getReset = function getReset() {
+  var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'inherited';
+
+  switch (option) {
+    case 'inherited':
+      return _inherited2['default'];
+    default:
+      // If option is an object, merge it with the `inherited` props.
+      return _extends({}, _inherited2['default'], option);
+  }
+};
+
 function jssIsolate() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-  var sheet = null;
+  var globalIsolate = options.isolate == null ? true : options.isolate;
+  var selectors = [];
+  var resetSheet = null;
   var resetRule = void 0;
-  var selectors = [];
 
-  return function (rule) {
-    if (rule.type !== 'regular') return;
-    if (!rule.options.sheet) return;
-    if (rule.options.sheet === sheet) return;
-    if (rule.options.sheet.options.isolate === false) return;
-    if (rule.options.parent && (rule.options.parent.type === 'keyframe' || rule.options.parent.type === 'conditional')) return;
-    if (rule.style && rule.style.isolate === false) {
+  function onProcessRule(rule, sheet) {
+    if (rule.type !== 'regular' || !sheet || sheet === resetSheet || !rule.style) return;
+
+    var parent = rule.options.parent;
+
+    if (parent && (parent.type === 'keyframe' || parent.type === 'conditional')) {
+      return;
+    }
+
+    var isolate = globalIsolate;
+    if (sheet.options.isolate != null) isolate = sheet.options.isolate;
+    if (rule.style.isolate != null) {
+      isolate = rule.style.isolate;
       delete rule.style.isolate;
+    }
+
+    if (isolate === false) return;
+
+    // Option `isolate` may be for e.g. `{isolate: 'root'}`.
+    // In this case it must match the rule name in order to isolate it.
+    if (isolate !== rule.name && typeof isolate === 'string') {
       return;
     }
+
     // Create a separate style sheet once and use it for all rules.
-    if (!sheet && rule.options.jss) {
-      sheet = rule.options.jss.createStyleSheet({}, {
+    if (!resetSheet && rule.options.jss) {
+      resetSheet = rule.options.jss.createStyleSheet({}, {
         link: true,
@@ -65,5 +94,4 @@ meta: 'jss-isolate',
       });
-      var mergedReset = options.reset ? _extends({}, _reset2['default'], options.reset) : _reset2['default'];
-      resetRule = sheet.addRule('reset', mergedReset);
-      sheet.attach();
+      resetRule = resetSheet.addRule('reset', getReset(options.reset));
+      resetSheet.attach();
     }
@@ -74,3 +102,5 @@ if (selectors.indexOf(rule.selector) === -1) {
     setSelector(resetRule, selectors);
-  };
+  }
+
+  return { onProcessRule: onProcessRule };
 }

tests/index.test.js

@@ -89,7 +89,7 @@ 'use strict';
       (0, _expect2['default'])(resetRule.prop('border-collapse')).to.be('separate');
-      (0, _expect2['default'])(resetRule.prop('font-family')).to.be('serif');
+      (0, _expect2['default'])(resetRule.prop('font-family')).to.be('initial');
     });
   });
 
-  describe('works in multiple stylesheets', function () {
+  describe('works in multiple StyleSheets', function () {
     var sheet1 = void 0;
@@ -119,3 +119,22 @@ var sheet2 = void 0;
 
-  describe('ignores rules if they are ignored in stylesheet options', function () {
+  describe('global option "isolate"', function () {
+    beforeEach(function (done) {
+      jss = (0, _jss.create)().use((0, _index2['default'])({
+        isolate: false
+      }));
+
+      jss.createStyleSheet({
+        a: {
+          color: 'blue'
+        }
+      });
+      setTimeout(done);
+    });
+
+    it('should use global option', function () {
+      (0, _expect2['default'])(_jss.sheets.registry[0].getRule('reset')).to.be(undefined);
+    });
+  });
+
+  describe('ignores rules if they are ignored in StyleSheet options', function () {
     var sheet1 = void 0;
@@ -145,2 +164,43 @@ var sheet2 = void 0;
 
+  describe('isolate rules if they have isolate: true even if StyleSheet options is isolate: false', function () {
+    var sheet = void 0;
+
+    beforeEach(function (done) {
+      sheet = jss.createStyleSheet({
+        link: {
+          isolate: true,
+          color: 'blue'
+        }
+      }, { isolate: false });
+      setTimeout(done);
+    });
+
+    it('should add selectors to the reset rule', function () {
+      var resetRule = _jss.sheets.registry[0].getRule('reset');
+      (0, _expect2['default'])(resetRule.selector).to.contain(sheet.classes.link);
+    });
+  });
+
+  describe('isolate option as a string', function () {
+    var sheet = void 0;
+
+    beforeEach(function (done) {
+      sheet = jss.createStyleSheet({
+        root: {
+          color: 'blue'
+        },
+        a: {
+          color: 'red'
+        }
+      }, { isolate: 'root' });
+      setTimeout(done);
+    });
+
+    it('should only isolate rules with matching name', function () {
+      var resetRule = _jss.sheets.registry[0].getRule('reset');
+      (0, _expect2['default'])(resetRule.selector).to.contain(sheet.classes.root);
+      (0, _expect2['default'])(resetRule.selector).not.to.contain(sheet.classes.a);
+    });
+  });
+
   describe('ignore rules if property isolate is set to false', function () {
@@ -196,3 +256,3 @@ var sheet = void 0;
 
-  describe('option "reset"', function () {
+  describe('option "reset={width}" with custom props', function () {
     beforeEach(function (done) {
@@ -199,0 +259,0 @@ jss = (0, _jss.create)().use((0, _index2['default'])({

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

71258

increased by25.39%

Lines of code

1075

increased by25.44%

Number of lines in readme file

152

increased by67.03%

No dependency changes