substyle - npm Package Compare versions

Comparing version 1.2.1 to 2.0.0

lib/substyle.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -30,6 +28,2 @@
 
-var _pickBy = require('lodash/fp/pickBy');
-
-var _pickBy2 = _interopRequireDefault(_pickBy);
-
 var _negate = require('lodash/negate');
@@ -39,2 +33,6 @@
 
+var _identity = require('lodash/identity');
+
+var _identity2 = _interopRequireDefault(_identity);
+
 var _flatten = require('lodash/flatten');
@@ -48,2 +46,14 @@
 
+var _filter = require('lodash/fp/filter');
+
+var _filter2 = _interopRequireDefault(_filter);
+
+var _map = require('lodash/fp/map');
+
+var _map2 = _interopRequireDefault(_map);
+
+var _compose = require('lodash/fp/compose');
+
+var _compose2 = _interopRequireDefault(_compose);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -72,20 +82,25 @@
 
-  var modifierKeys = selectedKeys.filter(isModifier);
-  var elementKeys = selectedKeys.filter(isElement);
+  var baseClassName = className && className.split(' ')[0];
+  var toElementClassNames = (0, _map2.default)(function (key) {
+    return baseClassName + '__' + key;
+  });
+  var toModifierClassNames = (0, _map2.default)(function (key) {
+    return baseClassName + '--' + key.substring(1);
+  });
 
-  var getElementStyles = function getElementStyles(style) {
+  var modifierKeys = (0, _filter2.default)(isModifier, selectedKeys);
+  var elementKeys = (0, _filter2.default)(isElement, selectedKeys);
+
+  var hoistElementStyles = function hoistElementStyles(style) {
     return (0, _values2.default)(pickNestedStyles(style, elementKeys));
   };
-  var getModifierStyles = function getModifierStyles(style) {
+  var hoistModifierStyles = function hoistModifierStyles(style) {
     return (0, _values2.default)(pickNestedStyles(style, modifierKeys));
   };
+  var hoistElementStylesFromEach = elementKeys.length > 0 ? (0, _compose2.default)(_flatten2.default, (0, _map2.default)(hoistElementStyles)) : _identity2.default;
 
   return _extends({}, style && {
-    style: _merge2.default.apply(undefined, [{}].concat(_toConsumableArray((0, _flatten2.default)([style].concat(_toConsumableArray(getModifierStyles(style))).map(elementKeys.length > 0 ? getElementStyles : pickDirectStyles)))))
+    style: _merge2.default.apply(undefined, [{}].concat(_toConsumableArray(hoistElementStylesFromEach([style].concat(_toConsumableArray(hoistModifierStyles(style)))))))
   }, className && {
-    className: (elementKeys.length === 0 ? [className].concat(_toConsumableArray(modifierKeys.map(function (key) {
-      return className + '--' + key.substring(1);
-    }))) : elementKeys.map(function (key) {
-      return className + '__' + key;
-    })).join(' ')
+    className: (elementKeys.length === 0 ? [className].concat(_toConsumableArray(toModifierClassNames(modifierKeys))) : toElementClassNames(elementKeys)).join(' ')
   });
@@ -98,20 +113,16 @@ }
 var isElement = (0, _negate2.default)(isModifier);
-var isPseudoClassOrMedia = function isPseudoClassOrMedia(key) {
-  return key[0] === ':' || key.substring(0, 6) === '@media';
-};
 
-var pickNestedStyles = function pickNestedStyles(style, keys) {
-  var nestedStyles = {};
-  keys.forEach(function (key) {
-    var camelCaseKey = camelize(key);
-    if (style[camelCaseKey] && _typeof(style[camelCaseKey]) === "object") nestedStyles[camelCaseKey] = style[camelCaseKey];
-    if (style[key] && _typeof(style[key]) === "object") nestedStyles[key] = style[key];
-  });
-  return nestedStyles;
+var pickNestedStyles = function pickNestedStyles(style, keysToPick) {
+  var camelizedKeysToPick = (0, _map2.default)(camelize, keysToPick);
+  var styleKeys = (0, _keys2.default)(style);
+  var result = {};
+  for (var i = 0, l = styleKeys.length; i < l; ++i) {
+    var key = styleKeys[i];
+    if (keysToPick.indexOf(key) >= 0 || camelizedKeysToPick.indexOf(camelize(key)) >= 0) {
+      result[key] = style[key];
+    }
+  }
+  return result;
 };
 
-var pickDirectStyles = (0, _pickBy2.default)(function (value, key) {
-  return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) !== "object" || isPseudoClassOrMedia(key);
-});
-
 var camelize = function camelize(key) {
@@ -118,0 +129,0 @@ return key.replace(/-(\w)/g, function (m, c) {

package.json

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

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

17649

increased by0.52%

Lines of code

124

increased by5.08%

No dependency changes