jss-plugin-rule-value-observable - npm Package Compare versions

Comparing version 10.4.0 to 10.5.0

dist/jss-plugin-rule-value-observable.bundle.js

@@ -180,3 +180,3 @@ function symbolObservablePonyfill(root) {
 
-function toCssValue(value, ignoreImportant) {
+var toCssValue = function toCssValue(value, ignoreImportant) {
   if (ignoreImportant === void 0) {
@@ -203,3 +203,3 @@ ignoreImportant = false;
   return cssValue;
-}
+};
 /**
@@ -491,7 +491,7 @@ * Indent a string.
     this.renderable = void 0;
-    this.key = key; // Key might contain a unique suffix in case the `name` passed by user was duplicate.
+    this.key = key;
+    var atMatch = key.match(atRegExp);
+    this.at = atMatch ? atMatch[1] : 'unknown'; // Key might contain a unique suffix in case the `name` passed by user was duplicate.
 
-    this.query = options.name;
-    var atMatch = key.match(atRegExp);
-    this.at = atMatch ? atMatch[1] : 'unknown';
+    this.query = options.name || "@" + this.at;
     this.options = options;
@@ -1048,9 +1048,9 @@ this.rules = new RuleList(_extends({}, options, {
     if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string') {
-      name = arguments.length <= 0 ? undefined : arguments[0]; // $FlowFixMe
+      name = arguments.length <= 0 ? undefined : arguments[0]; // $FlowFixMe[invalid-tuple-index]
 
-      data = arguments.length <= 1 ? undefined : arguments[1]; // $FlowFixMe
+      data = arguments.length <= 1 ? undefined : arguments[1]; // $FlowFixMe[invalid-tuple-index]
 
       options = arguments.length <= 2 ? undefined : arguments[2];
     } else {
-      data = arguments.length <= 0 ? undefined : arguments[0]; // $FlowFixMe
+      data = arguments.length <= 0 ? undefined : arguments[0]; // $FlowFixMe[invalid-tuple-index]
 
@@ -1282,3 +1282,9 @@ options = arguments.length <= 1 ? undefined : arguments[1];
     var rule = typeof name === 'object' ? name : this.rules.get(name);
-    if (!rule) return false;
+
+    if (!rule || // Style sheet was created without link: true and attached, in this case we
+    // won't be able to remove the CSS rule from the DOM.
+    this.attached && !rule.renderable) {
+      return false;
+    }
+
     this.rules.remove(rule);
@@ -1390,3 +1396,3 @@
     for (var i = 0; i < this.registry.onProcessStyle.length; i++) {
-      // $FlowFixMe
+      // $FlowFixMe[prop-missing]
       rule.style = this.registry.onProcessStyle[i](rule.style, rule, sheet);
@@ -1569,3 +1575,3 @@ }
 
-var sheets = new SheetsRegistry();
+var registry = new SheetsRegistry();
 /* eslint-disable */
@@ -1640,3 +1646,3 @@ // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
 
-function getPropertyValue(cssRule, prop) {
+var getPropertyValue = function getPropertyValue(cssRule, prop) {
   try {
@@ -1653,3 +1659,3 @@ // Support CSSTOM.
   }
-}
+};
 /**
@@ -1660,3 +1666,3 @@ * Set a style property.
 
-function setProperty(cssRule, prop, value) {
+var setProperty = function setProperty(cssRule, prop, value) {
   try {
@@ -1686,3 +1692,3 @@ var cssValue = value;
   return true;
-}
+};
 /**
@@ -1693,3 +1699,3 @@ * Remove a style property.
 
-function removeProperty(cssRule, prop) {
+var removeProperty = function removeProperty(cssRule, prop) {
   try {
@@ -1705,3 +1711,3 @@ // Support CSSTOM.
   }
-}
+};
 /**
@@ -1712,3 +1718,3 @@ * Set the selector.
 
-function setSelector(cssRule, selectorText) {
+var setSelector = function setSelector(cssRule, selectorText) {
   cssRule.selectorText = selectorText; // Return false if setter was not successful.
@@ -1718,3 +1724,3 @@ // Currently works in chrome only.
   return cssRule.selectorText === selectorText;
-}
+};
 /**
@@ -1784,7 +1790,7 @@ * Gets the `head` element upon the first call and caches it.
 function findPrevNode(options) {
-  var registry = sheets.registry;
+  var registry$1 = registry.registry;
 
-  if (registry.length > 0) {
+  if (registry$1.length > 0) {
     // Try to insert before the next higher sheet.
-    var sheet = findHigherSheet(registry, options);
+    var sheet = findHigherSheet(registry$1, options);
 
@@ -1799,3 +1805,3 @@ if (sheet && sheet.renderer) {
 
-    sheet = findHighestSheet(registry, options);
+    sheet = findHighestSheet(registry$1, options);
 
@@ -1866,9 +1872,2 @@ if (sheet && sheet.renderer) {
 var _insertRule = function insertRule(container, rule, index) {
-  var 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 {
@@ -1892,2 +1891,13 @@ if ('insertRule' in container) {
 
+var getValidRuleInsertionIndex = function getValidRuleInsertionIndex(container, index) {
+  var 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
+    return maxIndex;
+  }
+
+  return index;
+};
+
 var createStyle = function createStyle() {
@@ -1906,2 +1916,4 @@ var el = document.createElement('style'); // Without it, IE will have a broken source order specificity if we
   // HTMLStyleElement needs fixing https://github.com/facebook/flow/issues/2696
+  // Will be empty if link: true option is not set, because
+  // it is only for use together with insertRule API.
   function DomRenderer(sheet) {
@@ -1914,5 +1926,6 @@ this.getPropertyValue = getPropertyValue;
     this.sheet = void 0;
-    this.hasInsertedRules = false; // There is no sheet when the renderer is used from a standalone StyleRule.
+    this.hasInsertedRules = false;
+    this.cssRules = []; // There is no sheet when the renderer is used from a standalone StyleRule.
 
-    if (sheet) sheets.add(sheet);
+    if (sheet) registry.add(sheet);
     this.sheet = sheet;
@@ -1958,4 +1971,11 @@
   _proto.detach = function detach() {
+    if (!this.sheet) return;
     var parentNode = this.element.parentNode;
-    if (parentNode) parentNode.removeChild(this.element);
+    if (parentNode) parentNode.removeChild(this.element); // In the most browsers, rules inserted using insertRule() API will be lost when style element is removed.
+    // Though IE will keep them and we need a consistent behavior.
+
+    if (this.sheet.options.link) {
+      this.cssRules = [];
+      this.element.textContent = '\n';
+    }
   }
@@ -2003,6 +2023,8 @@ /**
       if (rule.type === 'conditional' || rule.type === 'keyframes') {
-        // We need to render the container without children first.
+        var _insertionIndex = getValidRuleInsertionIndex(nativeParent, index); // We need to render the container without children first.
+
+
         latestNativeParent = _insertRule(nativeParent, parent.toString({
           children: false
-        }), index);
+        }), _insertionIndex);
 
@@ -2012,2 +2034,4 @@ if (latestNativeParent === false) {
         }
+
+        this.refCssRule(rule, _insertionIndex, latestNativeParent);
       }
@@ -2017,9 +2041,2 @@
       return latestNativeParent;
-    } // IE keeps the CSSStyleSheet after style node has been reattached,
-    // so we need to check if the `renderable` reference the right style sheet and not
-    // rerender those rules.
-
-
-    if (rule.renderable && rule.renderable.parentStyleSheet === this.element.sheet) {
-      return rule.renderable;
     }
@@ -2029,4 +2046,5 @@
     if (!ruleStr) return false;
+    var insertionIndex = getValidRuleInsertionIndex(nativeParent, index);
 
-    var nativeRule = _insertRule(nativeParent, ruleStr, index);
+    var nativeRule = _insertRule(nativeParent, ruleStr, insertionIndex);
 
@@ -2038,4 +2056,13 @@ if (nativeRule === false) {
     this.hasInsertedRules = true;
-    rule.renderable = nativeRule;
+    this.refCssRule(rule, insertionIndex, nativeRule);
     return nativeRule;
+  };
+
+  _proto.refCssRule = function refCssRule(rule, index, cssRule) {
+    rule.renderable = cssRule; // We only want to reference the top level rules, deleteRule API doesn't support removing nested rules
+    // like rules inside media queries or keyframes
+
+    if (rule.options.parent instanceof StyleSheet) {
+      this.cssRules[index] = cssRule;
+    }
   }
@@ -2052,2 +2079,3 @@ /**
     sheet.deleteRule(index);
+    this.cssRules.splice(index, 1);
     return true;
@@ -2061,9 +2089,3 @@ }
   _proto.indexOf = function indexOf(cssRule) {
-    var cssRules = this.element.sheet.cssRules;
-
-    for (var index = 0; index < cssRules.length; index++) {
-      if (cssRule === cssRules[index]) return index;
-    }
-
-    return -1;
+    return this.cssRules.indexOf(cssRule);
   }
@@ -2081,2 +2103,3 @@ /**
     this.element.sheet.deleteRule(index);
+    this.cssRules.splice(index, 1);
     return this.insertRule(rule, index);
@@ -2103,3 +2126,3 @@ }
     this.id = instanceCounter++;
-    this.version = "10.4.0";
+    this.version = "10.5.0";
     this.plugins = new PluginsRegistry();
@@ -2176,3 +2199,3 @@ this.options = {
     if (typeof index !== 'number') {
-      index = sheets.index === 0 ? 0 : sheets.index + 1;
+      index = registry.index === 0 ? 0 : registry.index + 1;
     }
@@ -2197,3 +2220,3 @@
     sheet.detach();
-    sheets.remove(sheet);
+    registry.remove(sheet);
     return this;
@@ -2218,5 +2241,5 @@ }
     if (typeof name === 'object') {
-      // $FlowIgnore
+      // $FlowFixMe[incompatible-call]
       return this.createRule(undefined, name, style);
-    } // $FlowIgnore
+    } // $FlowFixMe[incompatible-type]
 
@@ -2269,3 +2292,3 @@
 
-var index = create();
+var jss = create();
 
@@ -2276,3 +2299,3 @@ var isObservable = function isObservable(value) {
 
-function observablePlugin(updateOptions) {
+var observablePlugin = function observablePlugin(updateOptions) {
   return {
@@ -2317,4 +2340,4 @@ onCreateRule: function onCreateRule(name, decl, options) {
   };
-}
+};
 
 export default observablePlugin;

dist/jss-plugin-rule-value-observable.cjs.js

@@ -5,12 +5,14 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var $$observable = _interopDefault(require('symbol-observable'));
+var $$observable = require('symbol-observable');
 var jss = require('jss');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var $$observable__default = /*#__PURE__*/_interopDefaultLegacy($$observable);
+
 var isObservable = function isObservable(value) {
-  return value && value[$$observable] && value === value[$$observable]();
+  return value && value[$$observable__default['default']] && value === value[$$observable__default['default']]();
 };
 
-function observablePlugin(updateOptions) {
+var observablePlugin = function observablePlugin(updateOptions) {
   return {
@@ -55,4 +57,4 @@ onCreateRule: function onCreateRule(name, decl, options) {
   };
-}
+};
 
 exports.default = observablePlugin;

dist/jss-plugin-rule-value-observable.esm.js

@@ -8,3 +8,3 @@ import $$observable from 'symbol-observable';
 
-function observablePlugin(updateOptions) {
+var observablePlugin = function observablePlugin(updateOptions) {
   return {
@@ -49,4 +49,4 @@ onCreateRule: function onCreateRule(name, decl, options) {
   };
-}
+};
 
 export default observablePlugin;

dist/jss-plugin-rule-value-observable.js

 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jss')) :
 	typeof define === 'function' && define.amd ? define(['exports', 'jss'], factory) :
-	(global = global || self, factory(global.jssPluginRuleValueObservable = {}, global.jss));
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.jssPluginRuleValueObservable = {}, global.jss));
 }(this, (function (exports, jss) { 'use strict';
@@ -47,3 +47,3 @@
 
-	function observablePlugin(updateOptions) {
+	var observablePlugin = function observablePlugin(updateOptions) {
 	  return {
@@ -88,3 +88,3 @@ onCreateRule: function onCreateRule(name, decl, options) {
 	  };
-	}
+	};
 
@@ -91,0 +91,0 @@ exports.default = observablePlugin;

dist/jss-plugin-rule-value-observable.min.js

@@ -1,1 +0,1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("jss")):"function"==typeof define&&define.amd?define(["exports","jss"],n):n((e=e||self).jssPluginRuleValueObservable={},e.jss)}(this,function(e,n){"use strict";var o=function(e){var n,o=e.Symbol;return"function"==typeof o?o.observable?n=o.observable:(n=o("observable"),o.observable=n):n="@@observable",n}("undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof module?module:Function("return this")()),t=function(e){return e&&e[o]&&e===e[o]()};e.default=function(e){return{onCreateRule:function(o,r,u){if(!t(r))return null;var f=r,i=n.createRule(o,{},u);return f.subscribe(function(n){for(var o in n)i.prop(o,n[o],e)}),i},onProcessRule:function(n){if(!n||"style"===n.type){var o=n,r=o.style,u=function(n){var u=r[n];if(!t(u))return"continue";delete r[n],u.subscribe({next:function(t){o.prop(n,t,e)}})};for(var f in r)u(f)}}}},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("jss")):"function"==typeof define&&define.amd?define(["exports","jss"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).jssPluginRuleValueObservable={},e.jss)}(this,(function(e,n){"use strict";var o=function(e){var n,o=e.Symbol;return"function"==typeof o?o.observable?n=o.observable:(n=o("observable"),o.observable=n):n="@@observable",n}("undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof module?module:Function("return this")()),t=function(e){return e&&e[o]&&e===e[o]()};e.default=function(e){return{onCreateRule:function(o,r,u){if(!t(r))return null;var f=r,i=n.createRule(o,{},u);return f.subscribe((function(n){for(var o in n)i.prop(o,n[o],e)})),i},onProcessRule:function(n){if(!n||"style"===n.type){var o=n,r=o.style,u=function(n){var u=r[n];if(!t(u))return"continue";delete r[n],u.subscribe({next:function(t){o.prop(n,t,e)}})};for(var f in r)u(f)}}}},Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "jss-plugin-rule-value-observable",
   "description": "JSS plugin for TC39 Observables support",
-  "version": "10.4.0",
+  "version": "10.5.0",
   "license": "MIT",
@@ -22,3 +22,3 @@ "homepage": "https://cssinjs.org/",
     "src",
-    "LICENSE"
+    "!*.test.*"
   ],
@@ -45,6 +45,6 @@ "keywords": [
     "@babel/runtime": "^7.3.1",
-    "jss": "10.4.0",
+    "jss": "10.5.0",
     "symbol-observable": "^1.2.0"
   },
-  "gitHead": "a864fcf08c6da3cbb7ae878c09eaf52e619ed6c3"
+  "gitHead": "f9d93723ea0b8748c8a89248ebb680ed07e95c48"
 }

readme.md

@@ -12,3 +12,3 @@ # jss-plugin-rule-value-observable
 
-See our website [jss-plugin-rule-value-observable](https://cssinjs.org/jss-plugin-rule-value-observable?v=v10.4.0) for more information.
+See our website [jss-plugin-rule-value-observable](https://cssinjs.org/jss-plugin-rule-value-observable?v=v10.5.0) for more information.
 
@@ -15,0 +15,0 @@ ## Install

src/index.js

@@ -1,2 +0,2 @@
-/* @flow */
+// @flow
 import $$observable from 'symbol-observable'
@@ -9,3 +9,4 @@ import {
   type JssStyle,
-  type UpdateOptions
+  type UpdateOptions,
+  type Plugin
 } from 'jss'
@@ -18,41 +19,43 @@ import type {Observable} from './types'
 
-export default function observablePlugin(updateOptions?: Options) {
-  return {
-    onCreateRule(name?: string, decl: JssStyle, options: RuleOptions): Rule | null {
-      if (!isObservable(decl)) return null
+type ObservablePlugin = (Options | void) => Plugin
 
-      // Cast `decl` to `Observable`, since it passed the type guard.
-      const style$ = (decl: Observable<{[string]: string | number}>)
+const observablePlugin: ObservablePlugin = updateOptions => ({
+  onCreateRule(name?: string, decl: JssStyle, options: RuleOptions): Rule | null {
+    if (!isObservable(decl)) return null
 
-      const rule = ((createRule(name, {}, options): any): StyleRule)
+    // Cast `decl` to `Observable`, since it passed the type guard.
+    const style$ = (decl: Observable<{[string]: string | number}>)
 
-      // TODO
-      // Call `stream.subscribe()` returns a subscription, which should be explicitly
-      // unsubscribed from when we know this sheet is no longer needed.
-      style$.subscribe((style: JssStyle) => {
-        for (const prop in style) {
-          rule.prop(prop, style[prop], updateOptions)
-        }
-      })
+    const rule = ((createRule(name, {}, options): any): StyleRule)
 
-      return rule
-    },
+    // TODO
+    // Call `stream.subscribe()` returns a subscription, which should be explicitly
+    // unsubscribed from when we know this sheet is no longer needed.
+    style$.subscribe((style: JssStyle) => {
+      for (const prop in style) {
+        rule.prop(prop, style[prop], updateOptions)
+      }
+    })
 
-    onProcessRule(rule: Rule) {
-      if (rule && rule.type !== 'style') return
+    return rule
+  },
 
-      const styleRule = ((rule: any): StyleRule)
-      const {style} = styleRule
-      for (const prop in style) {
-        const value = style[prop]
-        if (!isObservable(value)) continue
-        delete style[prop]
-        value.subscribe({
-          next: nextValue => {
-            styleRule.prop(prop, nextValue, updateOptions)
-          }
-        })
-      }
+  onProcessRule(rule: Rule) {
+    if (rule && rule.type !== 'style') return
+
+    const styleRule = ((rule: any): StyleRule)
+    const {style} = styleRule
+    for (const prop in style) {
+      const value = style[prop]
+      if (!isObservable(value)) continue
+      delete style[prop]
+      value.subscribe({
+        next: nextValue => {
+          styleRule.prop(prop, nextValue, updateOptions)
+        }
+      })
     }
   }
-}
+})
+
+export default observablePlugin

No alert changes

Worsened metrics

Total package byte prevSize

76431

-7.58%

Number of package files

13

-18.75%

Lines of code

2110

-11.97%

Dependency changes

• + Added

  indefinite-observable@2.0.1
  (transitive)

• + Added

  jss@10.5.0
  (transitive)

• - Removed

  jss@10.4.0
  (transitive)

• Updated

  jss@10.5.0