substyle - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

lib/substyle.js

@@ -47,2 +47,6 @@ 'use strict';
 
+var _mapValues = require('lodash/mapValues');
+
+var _mapValues2 = _interopRequireDefault(_mapValues);
+
 var _compose = require('lodash/fp/compose');
@@ -52,4 +56,10 @@
 
+var _isPlainObject = require('lodash/isPlainObject');
+
+var _isPlainObject2 = _interopRequireDefault(_isPlainObject);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 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); } }
@@ -94,3 +104,3 @@
   return _extends({}, style && {
-    style: _merge2.default.apply(undefined, [{}].concat(_toConsumableArray(hoistElementStylesFromEach([style].concat(_toConsumableArray(hoistModifierStyles(style)))))))
+    style: attachToStringToObjects(_merge2.default.apply(undefined, [{}].concat(_toConsumableArray(hoistElementStylesFromEach([style].concat(_toConsumableArray(hoistModifierStyles(style))))))))
   }, className && {
@@ -104,2 +114,5 @@ className: (elementKeys.length === 0 ? [className].concat(_toConsumableArray(toModifierClassNames(modifierKeys))) : toElementClassNames(elementKeys)).join(' ')
 };
+var isPseudoOrMedia = function isPseudoOrMedia(key) {
+  return key[0] === ':' || key[0] === '@';
+};
 var isElement = (0, _negate2.default)(isModifier);
@@ -125,2 +138,18 @@
 };
+
+var attachToStringToObjects = function attachToStringToObjects(_ref2) {
+  var toString = _ref2.toString;
+
+  var styles = _objectWithoutProperties(_ref2, ['toString']);
+
+  return (0, _mapValues2.default)(styles, function (value, key) {
+    if (!isPseudoOrMedia(key) && Object.prototype.toString.call(value) === '[object Object]') {
+      value = _extends({}, value);
+      value.toString = function () {
+        return undefined;
+      };
+    }
+    return value;
+  });
+};
 module.exports = exports['default'];

package.json

 {
   "name": "substyle",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Universal styling for reusable React components",
@@ -10,3 +10,3 @@ "main": "lib/index.js",
     "test": "NODE_ENV=test mocha",
-    "prepublish": "npm run test && npm run clean && npm run build"
+    "prepublish": "npm run clean && npm run build"
   },
@@ -34,3 +34,3 @@ "repository": {
     "invariant": "^2.2.0",
-    "lodash": "^4.3.0",
+    "lodash": "^4.5.0",
     "warning": "^2.1.0"
@@ -37,0 +37,0 @@ },

README.md

@@ -105,3 +105,3 @@ # substyle
 
-For all React elements returned by the components `render` function other than the root container, `substyle(props, key)` is used with a `key` string as second argument, which identifies the element's type or role within the component. As a result, the corresponding DOM node is assigned a BEM class name of the form `'block__element'` on the one hand, and, on the other hand, receives all nested inline style definitions found under the nested property named `key` of the passed style prop.
+For all React elements returned by the component's `render` function other than the root container, `substyle(props, key)` is used with a `key` string as second argument, which identifies the element's type or role within the component. As a result, the corresponding DOM node is assigned a BEM class name of the form `'block__element'` on the one hand, and, on the other hand, receives all nested inline style definitions found under the nested property named `key` of the passed style prop.
 
@@ -179,4 +179,28 @@ **Example**
 
+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).
+
+
+```javascript
+import { defaultStyle } from 'substyle'
+
+// create preconfigured substyle
+const substyle = defaultStyle({
+  position: 'relative',
+  foo: {
+    position: 'absolute'
+  }
+})
+```
+
+
+
+### css modules
+
 TODO
 
+implementation ideas:
+
+- let users pass a `classNames` containing a nested object mapping element / modifier keys to generated css module class names
+- OR only derive a unique block class names via automatically and derive all element class names the same way as now (requires a custom generateScopedName function passed with the postcss options)
+
 ## Real world examples
@@ -183,0 +207,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

19327

increased by11.72%

Lines of code

142

increased by17.36%

Number of lines in readme file

210

increased by12.9%

Dependency changes

• Updatedlodash@^4.5.0