substyle - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0

lib/index.js

@@ -11,14 +11,5 @@ 'use strict';
 
-var _defaultStyle = require('./defaultStyle');
-
-var _defaultStyle2 = _interopRequireDefault(_defaultStyle);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var wrapper = function wrapper() {
-  return _substyle2.default.apply(undefined, arguments);
-};
-wrapper.defaultStyle = _defaultStyle2.default;
-
-exports.default = wrapper;
+exports.default = _substyle2.default;
 module.exports = exports['default'];

lib/substyle.js

@@ -9,4 +9,2 @@ 'use strict';
 
-exports.default = substyle;
-
 var _invariant = require('invariant');
@@ -16,93 +14,73 @@
 
-var _keys = require('lodash/keys');
+var _lodash = require('lodash');
 
-var _keys2 = _interopRequireDefault(_keys);
+var _fp = require('lodash/fp');
 
-var _values = require('lodash/values');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _values2 = _interopRequireDefault(_values);
+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 _negate = require('lodash/negate');
+function createSubstyle(closureProps) {
+  function substyle(props, selectedKeys) {
+    var style = (closureProps.style || props.style) && (0, _lodash.merge)({}, closureProps.style, props.style);
+    var className = props.className || closureProps.className;
 
-var _negate2 = _interopRequireDefault(_negate);
+    if (Object.prototype.toString.call(selectedKeys) === '[object Function]') {
+      selectedKeys = selectedKeys(props);
+    }
 
-var _identity = require('lodash/identity');
+    if (!selectedKeys) {
+      selectedKeys = [];
+    } else if (typeof selectedKeys === 'string') {
+      selectedKeys = [selectedKeys];
+    } else if (Object.prototype.toString.call(selectedKeys) === '[object Object]') {
+      selectedKeys = (0, _lodash.keys)(selectedKeys).reduce(function (keys, key) {
+        return keys.concat(selectedKeys[key] ? [key] : []);
+      }, []);
+    }
 
-var _identity2 = _interopRequireDefault(_identity);
+    (0, _invariant2.default)(Array.isArray(selectedKeys), 'Second parameter must be a string, an array of strings, a plain object with boolean ' + 'values, a falsy value, or a function with a return value of one of these four types.');
 
-var _flatten = require('lodash/flatten');
+    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 _flatten2 = _interopRequireDefault(_flatten);
+    var modifierKeys = (0, _fp.filter)(isModifier, selectedKeys);
+    var elementKeys = (0, _fp.filter)(isElement, selectedKeys);
 
-var _merge = require('lodash/merge');
+    var hoistElementStyles = function hoistElementStyles(style) {
+      return (0, _lodash.values)(pickNestedStyles(style, elementKeys));
+    };
+    var hoistModifierStyles = function hoistModifierStyles(style) {
+      return (0, _lodash.values)(pickNestedStylesRecursive(style, modifierKeys));
+    };
+    var hoistElementStylesFromEach = elementKeys.length > 0 ? (0, _fp.compose)(_lodash.flatten, (0, _fp.map)(hoistElementStyles)) : _lodash.identity;
 
-var _merge2 = _interopRequireDefault(_merge);
-
-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 }; }
-
-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); } }
-
-function substyle(_ref, selectedKeys) {
-  var style = _ref.style;
-  var className = _ref.className;
-
-
-  if (!selectedKeys) {
-    selectedKeys = [];
-  } else if (typeof selectedKeys === 'string') {
-    selectedKeys = [selectedKeys];
-  } else if (Object.prototype.toString.call(selectedKeys) === '[object Object]') {
-    selectedKeys = (0, _keys2.default)(selectedKeys).reduce(function (keys, key) {
-      return keys.concat(selectedKeys[key] ? [key] : []);
-    }, []);
+    return createSubstyle(_extends({}, style && {
+      style: _lodash.merge.apply(undefined, [{}].concat(_toConsumableArray(hoistElementStylesFromEach([style].concat(_toConsumableArray(hoistModifierStyles(style)))))))
+    }, className && {
+      className: (elementKeys.length === 0 ? [className].concat(_toConsumableArray(toModifierClassNames(modifierKeys))) : toElementClassNames(elementKeys)).join(' ')
+    }));
   }
 
-  (0, _invariant2.default)(Array.isArray(selectedKeys), 'Second parameter must be a string, an array of strings, a plain object with boolean values, or a falsy value');
+  // assign `style` and/or `className` props to the return function object
+  Object.assign(substyle, closureProps);
+  return substyle;
+}
 
-  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);
-  });
+exports.default = createSubstyle({});
 
-  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 hoistModifierStyles = function hoistModifierStyles(style) {
-    return (0, _values2.default)(pickNestedStylesRecursive(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(hoistElementStylesFromEach([style].concat(_toConsumableArray(hoistModifierStyles(style)))))))
-  }, className && {
-    className: (elementKeys.length === 0 ? [className].concat(_toConsumableArray(toModifierClassNames(modifierKeys))) : toElementClassNames(elementKeys)).join(' ')
-  });
-}
-
 var isModifier = function isModifier(key) {
   return key[0] === '&';
 };
-var isElement = (0, _negate2.default)(isModifier);
+var isElement = (0, _lodash.negate)(isModifier);
 
 var pickNestedStyles = function pickNestedStyles(style, keysToPick) {
-  var camelizedKeysToPick = (0, _map2.default)(camelize, keysToPick);
-  var styleKeys = (0, _keys2.default)(style);
+  var camelizedKeysToPick = (0, _fp.map)(camelize, keysToPick);
+  var styleKeys = (0, _lodash.keys)(style);
   var result = {};
@@ -120,3 +98,3 @@ for (var i = 0, l = styleKeys.length; i < l; ++i) {
   var result = pickNestedStyles(style, keysToPick);
-  var resultKeys = (0, _keys2.default)(result);
+  var resultKeys = (0, _lodash.keys)(result);
   var finalResult = result;
@@ -123,0 +101,0 @@ for (var i = 0, l = resultKeys.length; i < l; ++i) {

package.json

 {
   "name": "substyle",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "Universal styling for reusable React components",
@@ -37,7 +37,8 @@ "main": "lib/index.js",
   "devDependencies": {
-    "babel-cli": "^6.5.1",
+    "babel-cli": "^6.11.4",
+    "babel-core": "^6.11.4",
     "babel-plugin-add-module-exports": "^0.1.2",
-    "babel-preset-es2015": "^6.5.0",
-    "babel-preset-stage-2": "^6.5.0",
-    "babel-register": "^6.5.1",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-stage-2": "^6.11.0",
+    "babel-register": "^6.11.6",
     "chai": "^3.5.0",
@@ -44,0 +45,0 @@ "mocha": "^2.4.5",

README.md

@@ -72,2 +72,6 @@ # substyle
 
+## API
+
+TODO
+
 ## How to use it
@@ -177,12 +181,16 @@
 
-### Default styles
+### Chaining & default styles
 
-In many cases, a component defines some default inline styles. User custom styles should than be merged with the these styles. *substyle* includes a small convenience function for this purpose: The `defaultStyle` factory function is called with the default styles object, and returns a *substyle* function which is preconfigured to merge the `style` prop with the default style (using lodash's [merge](https://lodash.com/docs#merge) function).
+Every *substyle* call return a new instance of the *substyle* function which is preconfigured to use
+the styles selected in the previous call as a default. The `style` prop passed in the chained 
+*substyle* call will be merged with the default styles 
+(using lodash's [merge](https://lodash.com/docs#merge) function).
 
+TODO
 
 ```javascript
-import { defaultStyle } from 'substyle'
+import substyle from 'substyle'
 
 // create preconfigured substyle
-const substyle = defaultStyle({
+const mySubstyle = substyle({
   position: 'relative',
@@ -195,4 +203,19 @@ foo: {
 
+### Selector function for modifier keys
 
+TODO
 
+TODO: Also point out the possibility to bind derived substyle in render function
+
+```
+const substyleForMyComp = substyle(
+  { style: defaultStyles },
+  (props) => ({ '&disabled': props.readOnly })
+)
+
+const boundSubstyleForMyComp = elementKey => substyleForMyComp.bind(null, this.props)
+<div {...boundSubstyleForMyComp('myEl')} />
+```
+
+
 ### css modules
@@ -207,2 +230,11 @@
 
+
+### css in JS
+
+TODO
+
+implementation ideas:
+
+- add option to hook in 'transform' functions that take the selected inline style definitions and can turn them into css, e.g., by using aphrodite's StyleSheet.create or some wrapper around react-css
+
 ## Real world examples
@@ -209,0 +241,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

Number of lines in readme file

242

increased by15.24%

Worsened metrics

Total package byte prevSize

17930

decreased by-4.23%

Dev dependency count

9

increased by12.5%

Number of package files

6

decreased by-14.29%

Lines of code

93

decreased by-28.46%

No dependency changes