substyle - npm Package Compare versions

Comparing version 8.0.0 to 9.0.0

es6/useStyles.js

+import { useContext, useMemo } from 'react';
+import { PropsDecoratorContext } from './PropsDecoratorProvider';
+import createSubstyle from './createSubstyle';
+
+var useStyles = function useStyles(defaultStyle, _ref, modifiers) {
+  var style = _ref.style,
+      className = _ref.className,
+      classNames = _ref.classNames;
+  var propsDecorator = useContext(PropsDecoratorContext);
+  var substyle = useMemo(function () {
+    return createSubstyle({
+      style: style,
+      className: className,
+      classNames: classNames
+    }, propsDecorator);
+  }, [style, className, classNames, propsDecorator]);
+  return substyle(modifiers, defaultStyle);
+};
+
+export default useStyles;

lib/useStyles.js

+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _PropsDecoratorProvider = require("./PropsDecoratorProvider");
+
+var _createSubstyle = _interopRequireDefault(require("./createSubstyle"));
+
+var useStyles = function useStyles(defaultStyle, _ref, modifiers) {
+  var style = _ref.style,
+      className = _ref.className,
+      classNames = _ref.classNames;
+  var propsDecorator = (0, _react.useContext)(_PropsDecoratorProvider.PropsDecoratorContext);
+  var substyle = (0, _react.useMemo)(function () {
+    return (0, _createSubstyle.default)({
+      style: style,
+      className: className,
+      classNames: classNames
+    }, propsDecorator);
+  }, [style, className, classNames, propsDecorator]);
+  return substyle(modifiers, defaultStyle);
+};
+
+var _default = useStyles;
+exports.default = _default;

reports/junit/test-results-useStyles.xml

+<?xml version="1.0" encoding="UTF-8" ?>
+<testsuites disabled="0" errors="0" failures="0" tests="8" time="0.329">
+ <testsuite name="useStyles" timestamp="2020-04-28T12:12:03" hostname="localhost" time="0.329" errors="0" tests="8" skipped="0" disabled="0" failures="0">
+  <testcase classname="useStyles" name="should correctly apply default styles and derive class names" time="0.231" />
+  <testcase classname="useStyles" name="should merge styles provided by the user with default styles" time="0.031" />
+  <testcase classname="useStyles" name="should also work if a substyle instance is provided as `style`" time="0.017" />
+  <testcase classname="useStyles" name="should take a modifier selection function as second argument" time="0.006" />
+  <testcase classname="useStyles" name="should apply the selected modifiers also on the style supplied by the user" time="0.021" />
+  <testcase classname="useStyles" name="should give precedence to styles supplied by the user, regardless the modifiers specificity" time="0.006" />
+  <testcase classname="useStyles" name="should preserve styles if modifiers are shallow equal" time="0.005" />
+  <testcase classname="useStyles" name="should support providing a props decorator function via context" time="0.006" />
+ </testsuite>
+</testsuites>

es6/createSubstyle.js

@@ -14,3 +14,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { hoistModifierStylesRecursive, pickNestedStyles } from './pickStyles';
-import { assign, compact, isPlainObject, keys, merge, values } from './utils';
+import { compact, isPlainObject, keys, merge, values } from './utils';
 
@@ -46,3 +46,3 @@ var guessBaseClassName = function guessBaseClassName(classNames) {
   var propsDecorator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPropsDecorator;
-  var baseClassName = className || guessBaseClassName(classNames);
+  var baseClassName = className || guessBaseClassName(classNames) || (style === null || style === void 0 ? void 0 : style.className);
   var substyle = typeof style === 'function' ? style : memoize(function (select, defaultStyle) {
@@ -87,3 +87,3 @@ var selectedKeys = coerceSelection(select);
 
-  assign(substyle, propsForSpread);
+  Object.assign(substyle, propsForSpread);
   return substyle;
@@ -90,0 +90,0 @@ }

es6/index.js

@@ -0,7 +1,7 @@
+import PropsDecoratorProvider from './PropsDecoratorProvider';
 import createSubstyle from './createSubstyle';
-import createUseStyle from './createUseStyle';
-import PropsDecoratorProvider from './PropsDecoratorProvider';
 import defaultPropsDecorator from './defaultPropsDecorator';
 import inline from './inline';
-export { createUseStyle, createSubstyle, PropsDecoratorProvider, defaultPropsDecorator, inline };
-export default createUseStyle();
+import useStyles from './useStyles';
+export { createSubstyle, PropsDecoratorProvider, defaultPropsDecorator, inline };
+export default useStyles;

es6/utils.js

@@ -10,3 +10,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function mergeDeep(target, source) {
-  var output = assign({}, target);
+  var output = Object.assign({}, target);
 
@@ -16,5 +16,5 @@ if (isPlainObject(target) && isPlainObject(source)) {
       if (isPlainObject(source[key])) {
-        if (!(key in target)) assign(output, _defineProperty({}, key, source[key]));else output[key] = mergeDeep(target[key], source[key]);
+        if (!(key in target)) Object.assign(output, _defineProperty({}, key, source[key]));else output[key] = mergeDeep(target[key], source[key]);
       } else {
-        assign(output, _defineProperty({}, key, source[key]));
+        Object.assign(output, _defineProperty({}, key, source[key]));
       }
@@ -36,9 +36,2 @@ });
 };
-export var assign = function assign(target) {
-  for (var _len2 = arguments.length, sources = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-    sources[_key2 - 1] = arguments[_key2];
-  }
-
-  return Object.assign.apply(Object, [target].concat(sources));
-};
 export var identity = function identity(value) {
@@ -45,0 +38,0 @@ return value;

lib/createSubstyle.js

@@ -61,3 +61,3 @@ "use strict";
   var propsDecorator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultPropsDecorator.default;
-  var baseClassName = className || guessBaseClassName(classNames);
+  var baseClassName = className || guessBaseClassName(classNames) || (style === null || style === void 0 ? void 0 : style.className);
   var substyle = typeof style === 'function' ? style : (0, _memoize.default)(function (select, defaultStyle) {
@@ -102,3 +102,3 @@ var selectedKeys = (0, _coerceSelection.default)(select);
 
-  (0, _utils.assign)(substyle, propsForSpread);
+  Object.assign(substyle, propsForSpread);
   return substyle;
@@ -105,0 +105,0 @@ }

lib/index.js

@@ -8,20 +8,14 @@ "use strict";
 });
-Object.defineProperty(exports, "createSubstyle", {
+Object.defineProperty(exports, "PropsDecoratorProvider", {
   enumerable: true,
   get: function get() {
-    return _createSubstyle.default;
+    return _PropsDecoratorProvider.default;
   }
 });
-Object.defineProperty(exports, "createUseStyle", {
+Object.defineProperty(exports, "createSubstyle", {
   enumerable: true,
   get: function get() {
-    return _createUseStyle.default;
+    return _createSubstyle.default;
   }
 });
-Object.defineProperty(exports, "PropsDecoratorProvider", {
-  enumerable: true,
-  get: function get() {
-    return _PropsDecoratorProvider.default;
-  }
-});
 Object.defineProperty(exports, "defaultPropsDecorator", {
@@ -41,8 +35,6 @@ enumerable: true,
 
+var _PropsDecoratorProvider = _interopRequireDefault(require("./PropsDecoratorProvider"));
+
 var _createSubstyle = _interopRequireDefault(require("./createSubstyle"));
 
-var _createUseStyle = _interopRequireDefault(require("./createUseStyle"));
-
-var _PropsDecoratorProvider = _interopRequireDefault(require("./PropsDecoratorProvider"));
-
 var _defaultPropsDecorator = _interopRequireDefault(require("./defaultPropsDecorator"));
@@ -52,4 +44,5 @@
 
-var _default = (0, _createUseStyle.default)();
+var _useStyles = _interopRequireDefault(require("./useStyles"));
 
+var _default = _useStyles.default;
 exports.default = _default;

lib/utils.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.compact = exports.isPlainObject = exports.omit = exports.identity = exports.assign = exports.merge = exports.values = exports.keys = void 0;
+exports.compact = exports.isPlainObject = exports.omit = exports.identity = exports.merge = exports.values = exports.keys = void 0;
 
@@ -26,3 +26,3 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 function mergeDeep(target, source) {
-  var output = assign({}, target);
+  var output = Object.assign({}, target);
 
@@ -32,5 +32,5 @@ if (isPlainObject(target) && isPlainObject(source)) {
       if (isPlainObject(source[key])) {
-        if (!(key in target)) assign(output, (0, _defineProperty2.default)({}, key, source[key]));else output[key] = mergeDeep(target[key], source[key]);
+        if (!(key in target)) Object.assign(output, (0, _defineProperty2.default)({}, key, source[key]));else output[key] = mergeDeep(target[key], source[key]);
       } else {
-        assign(output, (0, _defineProperty2.default)({}, key, source[key]));
+        Object.assign(output, (0, _defineProperty2.default)({}, key, source[key]));
       }
@@ -55,12 +55,2 @@ });
 
-var assign = function assign(target) {
-  for (var _len2 = arguments.length, sources = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-    sources[_key2 - 1] = arguments[_key2];
-  }
-
-  return Object.assign.apply(Object, [target].concat(sources));
-};
-
-exports.assign = assign;
-
 var identity = function identity(value) {
@@ -67,0 +57,0 @@ return value;

package.json

 {
   "name": "substyle",
-  "version": "8.0.0",
+  "version": "9.0.0",
   "description": "Universal styling for reusable React components",
@@ -60,3 +60,3 @@ "main": "lib/index.js",
   },
-  "gitHead": "952071124e023fe71133bbed0f43826f795a49ac"
+  "gitHead": "a43976cf1ed36ac1417bd508df5016a5f82729ce"
 }

reports/junit/test-results-chaining.xml

 <?xml version="1.0" encoding="UTF-8" ?>
-<testsuites disabled="0" errors="0" failures="0" tests="2" time="0.002">
- <testsuite name="chaining" timestamp="2020-04-24T12:36:23" hostname="localhost" time="0.002" errors="0" tests="2" skipped="0" disabled="0" failures="0">
-  <testcase classname="chaining" name="should support chaining calls to selected deeper nested styles" time="0.001" />
-  <testcase classname="chaining" name="should select the style definitions for all modifiers substyle calls" time="0.001" />
+<testsuites disabled="0" errors="0" failures="0" tests="2" time="0.194">
+ <testsuite name="chaining" timestamp="2020-04-28T12:12:04" hostname="localhost" time="0.194" errors="0" tests="2" skipped="0" disabled="0" failures="0">
+  <testcase classname="chaining" name="should support chaining calls to selected deeper nested styles" time="0.095" />
+  <testcase classname="chaining" name="should select the style definitions for all modifiers substyle calls" time="0.099" />
  </testsuite>
 </testsuites>

reports/junit/test-results-classNamemanagement.xml

 <?xml version="1.0" encoding="UTF-8" ?>
-<testsuites disabled="0" errors="0" failures="0" tests="7" time="0.005">
- <testsuite name="`className` management" timestamp="2020-04-24T12:36:23" hostname="localhost" time="0.005" errors="0" tests="7" skipped="0" disabled="0" failures="0">
+<testsuites disabled="0" errors="0" failures="0" tests="7" time="0.007">
+ <testsuite name="`className` management" timestamp="2020-04-28T12:12:06" hostname="localhost" time="0.007" errors="0" tests="7" skipped="0" disabled="0" failures="0">
   <testcase classname="`className` management" name="should derive a BEM compliant className for a passed nested element key" time="0.002" />
-  <testcase classname="`className` management" name="should derive a BEM compliant className for a passed modifier key" time="0" />
-  <testcase classname="`className` management" name="should derive not include modifiers of parents elements in nested class names" time="0.001" />
-  <testcase classname="`className` management" name="should not return a className when no className has been set in the props" time="0" />
-  <testcase classname="`className` management" name="should not generate additional class names for modifiers if selectedKeys contain element keys" time="0.001" />
+  <testcase classname="`className` management" name="should derive a BEM compliant className for a passed modifier key" time="0.001" />
+  <testcase classname="`className` management" name="should derive not include modifiers of parents elements in nested class names" time="0" />
+  <testcase classname="`className` management" name="should not return a className when no className has been set in the props" time="0.001" />
+  <testcase classname="`className` management" name="should not generate additional class names for modifiers if selectedKeys contain element keys" time="0" />
   <testcase classname="`className` management" name="should return the original className when selectedKeys is not specified or empty" time="0.001" />
-  <testcase classname="`className` management" name="should correctly merge modifiers with existing classNames" time="0" />
+  <testcase classname="`className` management" name="should correctly merge modifiers with existing classNames" time="0.001" />
  </testsuite>
 </testsuites>

reports/junit/test-results-classNamesmapping.xml

 <?xml version="1.0" encoding="UTF-8" ?>
-<testsuites disabled="0" errors="0" failures="0" tests="5" time="0.035">
- <testsuite name="`classNames` mapping" timestamp="2020-04-24T12:36:21" hostname="localhost" time="0.035" errors="0" tests="5" skipped="0" disabled="0" failures="0">
-  <testcase classname="`classNames` mapping" name="should use the mapped value from `classNames`" time="0.019" />
-  <testcase classname="`classNames` mapping" name="should guess the base class name if no `className` prop is set" time="0.012" />
-  <testcase classname="`classNames` mapping" name="should not set derived class names when a `classNames` prop is present" time="0.001" />
-  <testcase classname="`classNames` mapping" name="should not set the base className if there is no mapping provided for it" time="0.001" />
-  <testcase classname="`classNames` mapping" name="should support modifier nesting to customize class names for combinations of modifiers" time="0" />
+<testsuites disabled="0" errors="0" failures="0" tests="5" time="0.014">
+ <testsuite name="`classNames` mapping" timestamp="2020-04-28T12:12:03" hostname="localhost" time="0.014" errors="0" tests="5" skipped="0" disabled="0" failures="0">
+  <testcase classname="`classNames` mapping" name="should use the mapped value from `classNames`" time="0.009" />
+  <testcase classname="`classNames` mapping" name="should guess the base class name if no `className` prop is set" time="0.002" />
+  <testcase classname="`classNames` mapping" name="should not set derived class names when a `classNames` prop is present" time="0.002" />
+  <testcase classname="`classNames` mapping" name="should not set the base className if there is no mapping provided for it" time="0" />
+  <testcase classname="`classNames` mapping" name="should support modifier nesting to customize class names for combinations of modifiers" time="0.001" />
  </testsuite>
 </testsuites>

reports/junit/test-results-defaultexport.xml

 <?xml version="1.0" encoding="UTF-8" ?>
-<testsuites disabled="0" errors="0" failures="0" tests="1" time="0.046">
- <testsuite name="default export" timestamp="2020-04-24T12:36:23" hostname="localhost" time="0.046" errors="0" tests="1" skipped="0" disabled="0" failures="0">
-  <testcase classname="default export" name="should be usable as a hook" time="0.046" />
+<testsuites disabled="0" errors="0" failures="0" tests="1" time="0.22">
+ <testsuite name="default export" timestamp="2020-04-28T12:12:03" hostname="localhost" time="0.22" errors="0" tests="1" skipped="0" disabled="0" failures="0">
+  <testcase classname="default export" name="should be usable as a hook" time="0.218" />
  </testsuite>
 </testsuites>

reports/junit/test-results-hoistModifierStylesRecursive.xml

 <?xml version="1.0" encoding="UTF-8" ?>
-<testsuites disabled="0" errors="0" failures="0" tests="3" time="0.021">
- <testsuite name="hoistModifierStylesRecursive" timestamp="2020-04-24T12:36:22" hostname="localhost" time="0.021" errors="0" tests="3" skipped="0" disabled="0" failures="0">
+<testsuites disabled="0" errors="0" failures="0" tests="3" time="0.003">
+ <testsuite name="hoistModifierStylesRecursive" timestamp="2020-04-28T12:12:06" hostname="localhost" time="0.003" errors="0" tests="3" skipped="0" disabled="0" failures="0">
   <testcase classname="hoistModifierStylesRecursive" name="should hoist styles from modifiers even if those are nested under unselected modifer keys" time="0.001" />
   <testcase classname="hoistModifierStylesRecursive" name="should omit nested style definitions that are hoisted but keep the nesting of unselected modifiers" time="0.001" />
-  <testcase classname="hoistModifierStylesRecursive" name="should never mutate nested style objects but create copies when merging" time="0.019" />
+  <testcase classname="hoistModifierStylesRecursive" name="should never mutate nested style objects but create copies when merging" time="0.001" />
  </testsuite>
 </testsuites>

reports/junit/test-results-inline.xml

 <?xml version="1.0" encoding="UTF-8" ?>
-<testsuites disabled="0" errors="0" failures="0" tests="2" time="0.001">
- <testsuite name="inline" timestamp="2020-04-24T12:36:22" hostname="localhost" time="0.001" errors="0" tests="2" skipped="0" disabled="0" failures="0">
-  <testcase classname="inline" name="should return an object with `style` and the props of the substyle instance" time="0.001" />
-  <testcase classname="inline" name="should return merge the inline styles of the substyle instance correctly" time="0" />
+<testsuites disabled="0" errors="0" failures="0" tests="2" time="0.003">
+ <testsuite name="inline" timestamp="2020-04-28T12:12:06" hostname="localhost" time="0.003" errors="0" tests="2" skipped="0" disabled="0" failures="0">
+  <testcase classname="inline" name="should return an object with `style` and the props of the substyle instance" time="0.002" />
+  <testcase classname="inline" name="should return merge the inline styles of the substyle instance correctly" time="0.001" />
  </testsuite>
 </testsuites>

reports/junit/test-results-isPlainObject.xml

 <?xml version="1.0" encoding="UTF-8" ?>
-<testsuites disabled="0" errors="0" failures="0" tests="8" time="0.008">
- <testsuite name="isPlainObject" timestamp="2020-04-24T12:36:22" hostname="localhost" time="0.008" errors="0" tests="8" skipped="0" disabled="0" failures="0">
+<testsuites disabled="0" errors="0" failures="0" tests="8" time="0.007">
+ <testsuite name="isPlainObject" timestamp="2020-04-28T12:12:05" hostname="localhost" time="0.007" errors="0" tests="8" skipped="0" disabled="0" failures="0">
   <testcase classname="isPlainObject" name="should check if input is object" time="0.003" />
   <testcase classname="isPlainObject" name="should check if input is object" time="0" />
   <testcase classname="isPlainObject" name="should check if input is object" time="0" />
+  <testcase classname="isPlainObject" name="should check if input is object" time="0.001" />
   <testcase classname="isPlainObject" name="should check if input is object" time="0" />
-  <testcase classname="isPlainObject" name="should check if input is object" time="0.003" />
   <testcase classname="isPlainObject" name="should check if input is object" time="0.001" />
   <testcase classname="isPlainObject" name="should check if input is object" time="0" />
-  <testcase classname="isPlainObject" name="should check if input is object" time="0" />
+  <testcase classname="isPlainObject" name="should check if input is object" time="0.001" />
  </testsuite>
 </testsuites>

reports/junit/test-results-memoization.xml

 <?xml version="1.0" encoding="UTF-8" ?>
 <testsuites disabled="0" errors="0" failures="0" tests="3" time="0.003">
- <testsuite name="memoization" timestamp="2020-04-24T12:36:22" hostname="localhost" time="0.003" errors="0" tests="3" skipped="0" disabled="0" failures="0">
+ <testsuite name="memoization" timestamp="2020-04-28T12:12:05" hostname="localhost" time="0.003" errors="0" tests="3" skipped="0" disabled="0" failures="0">
   <testcase classname="memoization" name="should return the very same result for two calls with same modifiers" time="0.002" />
@@ -5,0 +5,0 @@ <testcase classname="memoization" name="should return the very same result for two calls with same modifiers and identic default styles" time="0" />

reports/junit/test-results-merge.xml

 <?xml version="1.0" encoding="UTF-8" ?>
-<testsuites disabled="0" errors="0" failures="0" tests="5" time="0.001">
- <testsuite name="merge" timestamp="2020-04-24T12:36:22" hostname="localhost" time="0.001" errors="0" tests="5" skipped="0" disabled="0" failures="0">
+<testsuites disabled="0" errors="0" failures="0" tests="5" time="0.003">
+ <testsuite name="merge" timestamp="2020-04-28T12:12:05" hostname="localhost" time="0.003" errors="0" tests="5" skipped="0" disabled="0" failures="0">
   <testcase classname="merge" name="should merge values from input1 + input2" time="0" />
+  <testcase classname="merge" name="should merge values from input1 + input2" time="0.001" />
   <testcase classname="merge" name="should merge values from input1 + input2" time="0" />
   <testcase classname="merge" name="should merge values from input1 + input2" time="0.001" />
-  <testcase classname="merge" name="should merge values from input1 + input2" time="0" />
-  <testcase classname="merge" name="should merge values from input1 + input2" time="0" />
+  <testcase classname="merge" name="should merge values from input1 + input2" time="0.001" />
  </testsuite>
 </testsuites>

reports/junit/test-results-omit.xml

 <?xml version="1.0" encoding="UTF-8" ?>
-<testsuites disabled="0" errors="0" failures="0" tests="4" time="0.002">
- <testsuite name="omit" timestamp="2020-04-24T12:36:22" hostname="localhost" time="0.002" errors="0" tests="4" skipped="0" disabled="0" failures="0">
+<testsuites disabled="0" errors="0" failures="0" tests="4" time="0.007">
+ <testsuite name="omit" timestamp="2020-04-28T12:12:05" hostname="localhost" time="0.007" errors="0" tests="4" skipped="0" disabled="0" failures="0">
+  <testcase classname="omit" name="should omit values from input with given keys" time="0.006" />
   <testcase classname="omit" name="should omit values from input with given keys" time="0.001" />
   <testcase classname="omit" name="should omit values from input with given keys" time="0" />
   <testcase classname="omit" name="should omit values from input with given keys" time="0" />
-  <testcase classname="omit" name="should omit values from input with given keys" time="0.001" />
  </testsuite>
 </testsuites>

reports/junit/test-results-substyle.xml

 <?xml version="1.0" encoding="UTF-8" ?>
-<testsuites disabled="0" errors="0" failures="0" tests="20" time="0.037">
- <testsuite name="substyle" timestamp="2020-04-24T12:36:21" hostname="localhost" time="0.037" errors="0" tests="20" skipped="0" disabled="0" failures="0">
+<testsuites disabled="0" errors="0" failures="0" tests="20" time="0.137">
+ <testsuite name="substyle" timestamp="2020-04-28T12:12:05" hostname="localhost" time="0.137" errors="0" tests="20" skipped="0" disabled="0" failures="0">
   <testcase classname="substyle" name="should should select the nested inline styles for the given key" time="0.005" />
-  <testcase classname="substyle" name="should not return a style when no style has been set in the props" time="0.001" />
-  <testcase classname="substyle" name="should hoist style definitions for the active modifiers" time="0.001" />
-  <testcase classname="substyle" name="should not hoist modifier styles inside of element sub styles" time="0" />
-  <testcase classname="substyle" name="should support passing multiple keys in an array" time="0.001" />
-  <testcase classname="substyle" name="should support passing multiple keys as an object" time="0.005" />
-  <testcase classname="substyle" name="should return the top-level inline style definitions if selectedKeys is not specified" time="0" />
+  <testcase classname="substyle" name="should not return a style when no style has been set in the props" time="0.011" />
+  <testcase classname="substyle" name="should hoist style definitions for the active modifiers" time="0.005" />
+  <testcase classname="substyle" name="should not hoist modifier styles inside of element sub styles" time="0.007" />
+  <testcase classname="substyle" name="should support passing multiple keys in an array" time="0.039" />
+  <testcase classname="substyle" name="should support passing multiple keys as an object" time="0.018" />
+  <testcase classname="substyle" name="should return the top-level inline style definitions if selectedKeys is not specified" time="0.001" />
   <testcase classname="substyle" name="should include nested inline style definitions for pseudo-class selectors" time="0.001" />
-  <testcase classname="substyle" name="should include nested inline style definitions for media queries" time="0" />
+  <testcase classname="substyle" name="should include nested inline style definitions for media queries" time="0.001" />
   <testcase classname="substyle" name="should include keyframe objects assigned to `animationName` property" time="0.001" />
-  <testcase classname="substyle" name="should merge nested inline styles in the order of appearance in the object" time="0.014" />
-  <testcase classname="substyle" name="should merge element styles nested under modifiers if selectedKeys contain both, element keys and modifier keys" time="0" />
-  <testcase classname="substyle" name="should merge modifier styles for nested elements after the base styles for those elements" time="0" />
+  <testcase classname="substyle" name="should merge nested inline styles in the order of appearance in the object" time="0.023" />
+  <testcase classname="substyle" name="should merge element styles nested under modifiers if selectedKeys contain both, element keys and modifier keys" time="0.001" />
+  <testcase classname="substyle" name="should merge modifier styles for nested elements after the base styles for those elements" time="0.003" />
   <testcase classname="substyle" name="should also pick the inline style sub object under the camelized version of the key" time="0.001" />
-  <testcase classname="substyle" name="should correctly merge nested style definitions when selecting multiple modifiers" time="0.001" />
-  <testcase classname="substyle" name="should hoist from multiple levels deep of nested modifier keys in inline styles" time="0.001" />
+  <testcase classname="substyle" name="should correctly merge nested style definitions when selecting multiple modifiers" time="0.004" />
+  <testcase classname="substyle" name="should hoist from multiple levels deep of nested modifier keys in inline styles" time="0.008" />
   <testcase classname="substyle" name="should merge more deeply nested style definitions with higher precedence" time="0" />
-  <testcase classname="substyle" name="should make sure that more specific, i.e., deeper nested modifier styles, override styles higher up the object" time="0.001" />
-  <testcase classname="substyle" name="should take default styles as second arg to merge the style prop with" time="0" />
-  <testcase classname="substyle" name="should take a props decorator function as second arg of the constructor call and apply it on spread props" time="0.002" />
+  <testcase classname="substyle" name="should make sure that more specific, i.e., deeper nested modifier styles, override styles higher up the object" time="0.003" />
+  <testcase classname="substyle" name="should take default styles as second arg to merge the style prop with" time="0.001" />
+  <testcase classname="substyle" name="should take a props decorator function as second arg of the constructor call and apply it on spread props" time="0.003" />
  </testsuite>
 </testsuites>

es6/createUseStyle.js

-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import { useContext, useMemo } from 'react';
-import createSubstyle from './createSubstyle';
-import coerceSelection from './coerceSelection';
-import { PropsDecoratorContext } from './PropsDecoratorProvider';
-
-var createUseStyle = function createUseStyle(defaultStyle, getModifiers) {
-  var getDependsOn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (props) {
-    return Object.values(props);
-  };
-
-  var useStyle = function useStyle(props) {
-    var style = props.style,
-        className = props.className,
-        classNames = props.classNames,
-        rest = _objectWithoutProperties(props, ["style", "className", "classNames"]);
-
-    var propsDecorator = useContext(PropsDecoratorContext);
-    var substyle = useMemo(function () {
-      return createSubstyle({
-        style: style,
-        className: className,
-        classNames: classNames
-      }, propsDecorator);
-    }, [style, className, classNames, propsDecorator]);
-    /* eslint-disable react-hooks/exhaustive-deps */
-    // We need to break the general rule exhaustive-deps because we forward the deps we receive from the user
-    // we apply an extra useMemo to the user-specified deps, so React warns if these change in length
-
-    var dependsOn = typeof defaultStyle === 'function' && getDependsOn(rest) || [];
-    var dependsOnMemo = useMemo(function () {
-      return dependsOn;
-    }, dependsOn);
-    var modifiers = getModifiers ? coerceSelection(getModifiers(rest)) : [];
-    return useMemo(function () {
-      return substyle(modifiers, typeof defaultStyle === 'function' ? defaultStyle(rest) : defaultStyle);
-    }, // the array of deps must not change its length, so we join all modifiers
-    [substyle, modifiers.join(','), dependsOnMemo]);
-    /* eslint-enable react-hooks/exhaustive-deps */
-  };
-
-  return useStyle;
-};
-
-export default createUseStyle;

lib/createUseStyle.js

-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _react = require("react");
-
-var _createSubstyle = _interopRequireDefault(require("./createSubstyle"));
-
-var _coerceSelection = _interopRequireDefault(require("./coerceSelection"));
-
-var _PropsDecoratorProvider = require("./PropsDecoratorProvider");
-
-var createUseStyle = function createUseStyle(defaultStyle, getModifiers) {
-  var getDependsOn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (props) {
-    return Object.values(props);
-  };
-
-  var useStyle = function useStyle(props) {
-    var style = props.style,
-        className = props.className,
-        classNames = props.classNames,
-        rest = (0, _objectWithoutProperties2.default)(props, ["style", "className", "classNames"]);
-    var propsDecorator = (0, _react.useContext)(_PropsDecoratorProvider.PropsDecoratorContext);
-    var substyle = (0, _react.useMemo)(function () {
-      return (0, _createSubstyle.default)({
-        style: style,
-        className: className,
-        classNames: classNames
-      }, propsDecorator);
-    }, [style, className, classNames, propsDecorator]);
-    /* eslint-disable react-hooks/exhaustive-deps */
-    // We need to break the general rule exhaustive-deps because we forward the deps we receive from the user
-    // we apply an extra useMemo to the user-specified deps, so React warns if these change in length
-
-    var dependsOn = typeof defaultStyle === 'function' && getDependsOn(rest) || [];
-    var dependsOnMemo = (0, _react.useMemo)(function () {
-      return dependsOn;
-    }, dependsOn);
-    var modifiers = getModifiers ? (0, _coerceSelection.default)(getModifiers(rest)) : [];
-    return (0, _react.useMemo)(function () {
-      return substyle(modifiers, typeof defaultStyle === 'function' ? defaultStyle(rest) : defaultStyle);
-    }, // the array of deps must not change its length, so we join all modifiers
-    [substyle, modifiers.join(','), dependsOnMemo]);
-    /* eslint-enable react-hooks/exhaustive-deps */
-  };
-
-  return useStyle;
-};
-
-var _default = createUseStyle;
-exports.default = _default;

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of package files

66

1.54%

Worsened metrics

Total package byte prevSize

76789

-5.7%

Lines of code

645

-8.64%

No dependency changes