substyle - npm Package Compare versions

Comparing version 5.1.0 to 5.1.1

lib/createSubstyle.js

@@ -7,2 +7,46 @@ 'use strict';
 
+var _compose2 = require('lodash/fp/compose');
+
+var _compose3 = _interopRequireDefault(_compose2);
+
+var _filter2 = require('lodash/fp/filter');
+
+var _filter3 = _interopRequireDefault(_filter2);
+
+var _isArray2 = require('lodash/isArray');
+
+var _isArray3 = _interopRequireDefault(_isArray2);
+
+var _isString2 = require('lodash/isString');
+
+var _isString3 = _interopRequireDefault(_isString2);
+
+var _isPlainObject2 = require('lodash/isPlainObject');
+
+var _isPlainObject3 = _interopRequireDefault(_isPlainObject2);
+
+var _isFunction2 = require('lodash/isFunction');
+
+var _isFunction3 = _interopRequireDefault(_isFunction2);
+
+var _compact2 = require('lodash/compact');
+
+var _compact3 = _interopRequireDefault(_compact2);
+
+var _assign2 = require('lodash/assign');
+
+var _assign3 = _interopRequireDefault(_assign2);
+
+var _merge2 = require('lodash/merge');
+
+var _merge3 = _interopRequireDefault(_merge2);
+
+var _values2 = require('lodash/values');
+
+var _values3 = _interopRequireDefault(_values2);
+
+var _keys2 = require('lodash/keys');
+
+var _keys3 = _interopRequireDefault(_keys2);
+
 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; };
@@ -14,6 +58,2 @@
 
-var _lodash = require('lodash');
-
-var _fp = require('lodash/fp');
-
 var _defaultPropsDecorator = require('./defaultPropsDecorator');
@@ -27,2 +67,4 @@
 
+var _classNames = require('./classNames');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,6 +77,6 @@
     return [];
-  } else if ((0, _lodash.isString)(select)) {
+  } else if ((0, _isString3.default)(select)) {
     return [select];
-  } else if ((0, _lodash.isPlainObject)(select)) {
-    return (0, _lodash.keys)(select).reduce(function (acc, key) {
+  } else if ((0, _isPlainObject3.default)(select)) {
+    return (0, _keys3.default)(select).reduce(function (acc, key) {
       return acc.concat(select[key] ? [key] : []);
@@ -52,3 +94,3 @@ }, []);
 
-  var styleIsFunction = (0, _lodash.isFunction)(style);
+  var styleIsFunction = (0, _isFunction3.default)(style);
 
@@ -58,19 +100,11 @@ var substyle = styleIsFunction ? style : function (select, defaultStyle) {
 
-    (0, _invariant2.default)((0, _lodash.isArray)(selectedKeys), 'First parameter must be a string, an array of strings, ' + 'a plain object with boolean values, or a falsy value.');
+    (0, _invariant2.default)((0, _isArray3.default)(selectedKeys), 'First parameter must be a string, an array of strings, ' + 'a plain object with boolean values, or a falsy value.');
 
-    (0, _invariant2.default)(!defaultStyle || (0, _lodash.isPlainObject)(defaultStyle), 'Optional second parameter must be a plain object.');
+    (0, _invariant2.default)(!defaultStyle || (0, _isPlainObject3.default)(defaultStyle), 'Optional second parameter must be a plain object.');
 
-    var baseClassName = className && className.split(' ')[0];
-    var toElementClassNames = (0, _fp.map)(function (key) {
-      return baseClassName + '__' + key;
-    });
-    var toModifierClassNames = (0, _fp.map)(function (key) {
-      return baseClassName + '--' + key.substring(1);
-    });
+    var modifierKeys = (0, _filter3.default)(_filterKeys.isModifier, selectedKeys);
+    var elementKeys = (0, _filter3.default)(_filterKeys.isElement, selectedKeys);
 
-    var modifierKeys = (0, _fp.filter)(_filterKeys.isModifier, selectedKeys);
-    var elementKeys = (0, _fp.filter)(_filterKeys.isElement, selectedKeys);
-
     var collectElementStyles = elementKeys.length > 0 ? function (fromStyle) {
-      return (0, _lodash.values)((0, _pickStyles.pickNestedStyles)(fromStyle, elementKeys));
+      return (0, _values3.default)((0, _pickStyles.pickNestedStyles)(fromStyle, elementKeys));
     } : function (fromStyle) {
@@ -80,6 +114,27 @@ return [fromStyle];
 
+    var collectSelectedStyles = (0, _compose3.default)(collectElementStyles, function (fromStyle) {
+      return (0, _pickStyles.hoistModifierStylesRecursive)(fromStyle, modifierKeys);
+    });
+
+    // use the provided `className` only if there is no sub-element selection
+    var baseClassName = elementKeys.length === 0 ? className : undefined;
+
+    // if `classNames` are present, select the mapped class name
+    var selectedClassNames = classNames && _classNames.mergeClassNames.apply(undefined, _toConsumableArray(collectSelectedStyles((0, _classNames.coerceClassNames)(classNames))));
+    var selectedClassName = selectedClassNames && selectedClassNames.className;
+
+    // if `classNames` are not present, automatically derive a class name
+    var firstClassName = className && className.split(' ')[0];
+    var derivedClassName = !classNames && firstClassName && [].concat(_toConsumableArray(elementKeys.length === 0 ? modifierKeys.map(function (key) {
+      return firstClassName + '--' + key.substring(1);
+    }) : []), _toConsumableArray(elementKeys.map(function (key) {
+      return firstClassName + '__' + key;
+    }))).join(' ');
+
     return createSubstyle(_extends({}, (style || defaultStyle) && {
-      style: _lodash.merge.apply(undefined, [{}].concat(_toConsumableArray(collectElementStyles((0, _pickStyles.hoistModifierStylesRecursive)(defaultStyle, modifierKeys))), _toConsumableArray(collectElementStyles((0, _pickStyles.hoistModifierStylesRecursive)(style, modifierKeys)))))
-    }, className && {
-      className: (elementKeys.length === 0 ? [className].concat(_toConsumableArray(toModifierClassNames(modifierKeys))) : toElementClassNames(elementKeys)).join(' ')
+      style: _merge3.default.apply(undefined, [{}].concat(_toConsumableArray(collectSelectedStyles(defaultStyle)), _toConsumableArray(collectSelectedStyles(style))))
+    }, (baseClassName || selectedClassName || derivedClassName) && {
+      className: (0, _compact3.default)([baseClassName, selectedClassName, derivedClassName]).join(' ')
+    }, classNames && {
+      classNames: selectedClassNames || {}
     }), propsDecorator);
@@ -95,3 +150,3 @@ };
   // assign `style` and/or `className` props to the return function object
-  (0, _lodash.assign)(substyle, propsForSpread);
+  (0, _assign3.default)(substyle, propsForSpread);
   return substyle;
@@ -98,0 +153,0 @@ }

lib/defaultStyle.js

@@ -7,2 +7,10 @@ 'use strict';
 
+var _isFunction2 = require('lodash/isFunction');
+
+var _isFunction3 = _interopRequireDefault(_isFunction2);
+
+var _identity2 = require('lodash/identity');
+
+var _identity3 = _interopRequireDefault(_identity2);
+
 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; };
@@ -18,4 +26,2 @@
 
-var _lodash = require('lodash');
-
 var _createSubstyle = require('./createSubstyle');
@@ -62,3 +68,3 @@
           var modifiers = getModifiers && getModifiers(rest);
-          var finalDefaultStyle = (0, _lodash.isFunction)(defaultStyle) ? defaultStyle(rest) : defaultStyle;
+          var finalDefaultStyle = (0, _isFunction3.default)(defaultStyle) ? defaultStyle(rest) : defaultStyle;
 
@@ -74,3 +80,3 @@ return (0, _react.createElement)(this.getWrappedComponent(), _extends({
           var _context$ENHANCER_CON = this.context[_types.ENHANCER_CONTEXT_NAME],
-              enhance = _context$ENHANCER_CON === undefined ? _lodash.identity : _context$ENHANCER_CON;
+              enhance = _context$ENHANCER_CON === undefined ? _identity3.default : _context$ENHANCER_CON;
 
@@ -77,0 +83,0 @@

lib/filterKeys.js

@@ -8,7 +8,11 @@ 'use strict';
 
-var _lodash = require('lodash');
+var _negate2 = require('lodash/negate');
 
+var _negate3 = _interopRequireDefault(_negate2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 var isModifier = exports.isModifier = function isModifier(key) {
   return key[0] === '&';
 };
-var isElement = exports.isElement = (0, _lodash.negate)(isModifier);
+var isElement = exports.isElement = (0, _negate3.default)(isModifier);

lib/pickStyles.js

@@ -8,6 +8,26 @@ 'use strict';
 
-var _lodash = require('lodash');
+var _filter2 = require('lodash/filter');
 
+var _filter3 = _interopRequireDefault(_filter2);
+
+var _values2 = require('lodash/values');
+
+var _values3 = _interopRequireDefault(_values2);
+
+var _omit2 = require('lodash/omit');
+
+var _omit3 = _interopRequireDefault(_omit2);
+
+var _merge2 = require('lodash/merge');
+
+var _merge3 = _interopRequireDefault(_merge2);
+
+var _keys2 = require('lodash/keys');
+
+var _keys3 = _interopRequireDefault(_keys2);
+
 var _filterKeys = require('./filterKeys');
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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); } }
@@ -24,3 +44,3 @@
 
-  var styleKeys = (0, _lodash.keys)(style);
+  var styleKeys = (0, _keys3.default)(style);
   var result = {};
@@ -43,3 +63,3 @@ for (var i = 0, l = styleKeys.length; i < l; i += 1) {
   var camelizedKeysToPick = keysToPick.map(camelize);
-  var styleKeys = (0, _lodash.keys)(style);
+  var styleKeys = (0, _keys3.default)(style);
   var result = {};
@@ -59,6 +79,6 @@ for (var i = 0, l = styleKeys.length; i < l; i += 1) {
   // 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)))));
+  var result = _merge3.default.apply(undefined, [{}, (0, _omit3.default)(style, modifierKeysToPick)].concat(_toConsumableArray((0, _values3.default)(pickNestedStyles(style, modifierKeysToPick)))));
 
   // traverse nested styled for ALL modifiers
-  var modifierKeys = (0, _lodash.filter)((0, _lodash.keys)(result), _filterKeys.isModifier);
+  var modifierKeys = (0, _filter3.default)((0, _keys3.default)(result), _filterKeys.isModifier);
   for (var i = 0, l = modifierKeys.length; i < l; i += 1) {
@@ -70,3 +90,3 @@ var key = modifierKeys[i];
       delete result[key];
-      result = (0, _lodash.merge)({}, result, subresult);
+      result = (0, _merge3.default)({}, result, subresult);
     } else {
@@ -73,0 +93,0 @@ // non-selected modifier: replace with subresult

NOTES.md

@@ -56,11 +56,36 @@ # substyle
 
+### Show what substyle does by showing how to achieve the same without using substyle
 
+const MyComp = ({ style = {}, className }) => {
+  const {
+    header: headerStyle,
+    content: contentStyle,
 
-# Blog post
+    ...baseStyle,
+  } = style
 
-why not css? -> no encapsulation
-why not css modules -> assumptions about environment
-why not style as function of props -> makes it hard to customize styles, modifiers make it simpler
+  return (
+    <div className={className} style={baseStyle}
+      <Header
+        className={className && `${className}__header`}
+        style={headerStyle}
+      />
+      <div
+        className={className && `${className}__content`}
+        style={contentStyle}
+      >
+        { children }
+      </div>
+    </div>
+  )
+}
 
+
+
+
+
+# Second Blog post: Best practices for using substyle
+
 ship without styling, only essential style definitions (those that are needed to make a component functional)
+optionally provide one or multiple example themes, each as both, json and css file (users can extend or simply copy and modify them), extra export or even extra module so that users do not have to set up treeshaking
 theme components by wrapping the library (factory pattern https://github.com/nikgraf/future-react-ui)
@@ -67,0 +92,0 @@ no vendor-prefixing in default styles

package.json

 {
   "name": "substyle",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "Universal styling for reusable React components",
@@ -42,2 +42,3 @@ "main": "lib/index.js",
     "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-lodash": "3.2.11",
     "babel-plugin-transform-flow-strip-types": "^6.18.0",
@@ -44,0 +45,0 @@ "babel-preset-es2015": "^6.18.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

46409

increased by17.36%

Number of package files

16

increased by6.67%

Lines of code

415

increased by36.07%

Worsened metrics

Dev dependency count

22

increased by4.76%

No dependency changes