substyle - npm Package Compare versions

Comparing version 4.0.1 to 4.0.2

lib/createSubstyle.js

@@ -23,2 +23,4 @@ 'use strict';
 
+var _filterKeys = require('./filterKeys');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,7 +30,2 @@
 
-var isModifier = function isModifier(key) {
-  return key[0] === '&';
-};
-var isElement = (0, _lodash.negate)(isModifier);
-
 var coerceSelectedKeys = function coerceSelectedKeys(select) {
@@ -70,15 +67,13 @@ if (!select) {
 
-    var modifierKeys = (0, _fp.filter)(isModifier, selectedKeys);
-    var elementKeys = (0, _fp.filter)(isElement, selectedKeys);
+    var modifierKeys = (0, _fp.filter)(_filterKeys.isModifier, selectedKeys);
+    var elementKeys = (0, _fp.filter)(_filterKeys.isElement, selectedKeys);
 
-    var hoistElementStyles = function hoistElementStyles(styleObject) {
-      return (0, _lodash.values)((0, _pickStyles.pickNestedStyles)(styleObject, elementKeys));
+    var collectElementStyles = elementKeys.length > 0 ? function (fromStyle) {
+      return (0, _lodash.values)((0, _pickStyles.pickNestedStyles)(fromStyle, elementKeys));
+    } : function (fromStyle) {
+      return [fromStyle];
     };
-    var hoistModifierStyles = function hoistModifierStyles(styleObject) {
-      return (0, _lodash.values)((0, _pickStyles.pickNestedStylesRecursive)(styleObject, modifierKeys));
-    };
-    var hoistElementStylesFromEach = elementKeys.length > 0 ? (0, _fp.compose)(_lodash.flatten, (0, _fp.map)(hoistElementStyles)) : _lodash.identity;
 
     return createSubstyle(_extends({}, (style || defaultStyle) && {
-      style: _lodash.merge.apply(undefined, [{}].concat(_toConsumableArray(hoistElementStylesFromEach([defaultStyle].concat(_toConsumableArray(hoistModifierStyles(defaultStyle))))), _toConsumableArray(hoistElementStylesFromEach([style].concat(_toConsumableArray(hoistModifierStyles(style)))))))
+      style: _lodash.merge.apply(undefined, [{}].concat(_toConsumableArray(collectElementStyles((0, _pickStyles.hoistModifierStylesRecursive)(defaultStyle, modifierKeys))), _toConsumableArray(collectElementStyles((0, _pickStyles.hoistModifierStylesRecursive)(style, modifierKeys)))))
     }, className && {
@@ -85,0 +80,0 @@ className: (elementKeys.length === 0 ? [className].concat(_toConsumableArray(toModifierClassNames(modifierKeys))) : toElementClassNames(elementKeys)).join(' ')

lib/pickStyles.js

@@ -6,6 +6,10 @@ 'use strict';
 });
-exports.pickNestedStylesRecursive = exports.pickNestedStyles = exports.pickDirectStyles = undefined;
+exports.hoistModifierStylesRecursive = exports.pickNestedStyles = exports.pickDirectStyles = undefined;
 
 var _lodash = require('lodash');
 
+var _filterKeys = require('./filterKeys');
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 var camelize = function camelize(key) {
@@ -46,10 +50,24 @@ return key.replace(/-(\w)/g, function (m, c) {
 
-var pickNestedStylesRecursive = exports.pickNestedStylesRecursive = function pickNestedStylesRecursive(style, keysToPick) {
-  var result = pickNestedStyles(style, keysToPick);
-  var resultKeys = (0, _lodash.keys)(result);
-  var finalResult = result;
-  for (var i = 0, l = resultKeys.length; i < l; i += 1) {
-    finalResult = (0, _lodash.merge)({}, finalResult, pickNestedStylesRecursive(result[resultKeys[i]], keysToPick));
+// breadth-first hoisting of selected modifier style subtrees
+// does not traverse into element, :pseudo-selector or @directive subtrees
+var hoistModifierStylesRecursive = exports.hoistModifierStylesRecursive = function hoistModifierStylesRecursive(style, modifierKeysToPick) {
+  // hoist styles for selected modifiers on current level
+  var result = _lodash.merge.apply(undefined, [(0, _lodash.omit)(style, modifierKeysToPick)].concat(_toConsumableArray((0, _lodash.values)(pickNestedStyles(style, modifierKeysToPick)))));
+
+  // traverse nested styled for ALL modifiers
+  var modifierKeys = (0, _lodash.filter)((0, _lodash.keys)(result), _filterKeys.isModifier);
+  for (var i = 0, l = modifierKeys.length; i < l; i += 1) {
+    var key = modifierKeys[i];
+    var subresult = hoistModifierStylesRecursive(result[key], modifierKeysToPick);
+    if (modifierKeysToPick.indexOf(key) >= 0) {
+      // selected modifier: hoist subresult
+      delete result[key];
+      (0, _lodash.merge)(result, subresult);
+    } else {
+      // non-selected modifier: replace with subresult
+      result[key] = subresult;
+    }
   }
-  return finalResult;
+
+  return result;
 };

package.json

 {
   "name": "substyle",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Universal styling for reusable React components",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -60,3 +60,3 @@ # substyle
 }}>                                           // </div>
-  <span>Hello world!</span>                                  
+  <span>Hello world!</span>
 </Popover>
@@ -69,2 +69,15 @@ ```
 
+### Select style for element
+
+### Pass selected style to string type elements
+
+### Pass selected style to component type elements
+
+### Define default styling
+
+### Define style modifiers
+
+- based on props, as second arg to defaultStyle
+- based on state, by deriving a modified style (recommend hoisting state, e.g., recompose withState)
+
 ## API
@@ -71,0 +84,0 @@

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

36337

increased by3.45%

Number of package files

15

increased by7.14%

Lines of code

254

increased by7.63%

Number of lines in readme file

121

increased by12.04%

No dependency changes