substyle - npm Package Compare versions

Comparing version 5.1.2 to 6.0.0

lib/createSubstyle.js

@@ -65,4 +65,2 @@ 'use strict';
 
-var _classNames = require('./classNames');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -85,2 +83,27 @@
 
+var guessBaseClassName = function guessBaseClassName(classNames) {
+  // all class names must start with the same prefix: the component's base class name
+  // which will finally go to the container element
+  var firstKey = classNames && (0, _keys3.default)(classNames)[0];
+  return firstKey && firstKey.split('__')[0].split('--')[0];
+};
+
+var deriveClassNames = function deriveClassNames(className, elementKeys, modifierKeys) {
+  // do not derive class names, if the user did not specify any class name
+  if (!className) {
+    return undefined;
+  }
+
+  // derive class names based using the passed modifier/element keys
+  var firstClassName = className.split(' ')[0];
+  var derivedClassNames = [].concat(_toConsumableArray(elementKeys.length === 0 ? modifierKeys.map(function (key) {
+    return firstClassName + '--' + key.substring(1);
+  }) : []), _toConsumableArray(elementKeys.map(function (key) {
+    return firstClassName + '__' + key;
+  })));
+
+  // also use the provided `className` if there is no sub-element selection
+  return elementKeys.length === 0 ? [className].concat(_toConsumableArray(derivedClassNames)) : derivedClassNames;
+};
+
 function createSubstyle(_ref) {
@@ -94,2 +117,4 @@ var style = _ref.style,
 
+  var baseClassName = className || guessBaseClassName(classNames);
+
   var substyle = styleIsFunction ? style : function (select, defaultStyle) {
@@ -115,30 +140,19 @@ var selectedKeys = coerceSelectedKeys(select);
 
-    // use the provided `className` only if there is no sub-element selection
-    var baseClassName = elementKeys.length === 0 ? className : undefined;
+    var derivedClassNames = deriveClassNames(baseClassName, elementKeys, modifierKeys);
 
-    // 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: _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);
+    }, derivedClassNames && {
+      className: derivedClassNames.join(' ')
+    }, classNames && { classNames: classNames }), propsDecorator);
   };
 
   var styleProps = _extends({}, styleIsFunction ? style : { style: style });
+  var classNameSplitted = [].concat(_toConsumableArray(styleProps.className ? styleProps.className.split(' ') : []), _toConsumableArray(baseClassName ? baseClassName.split(' ') : []));
+  var mappedClassNames = classNames ? (0, _compact3.default)(classNameSplitted.map(function (singleClassName) {
+    return classNames[singleClassName];
+  })) : classNameSplitted;
 
-  var propsForSpread = propsDecorator(_extends({}, styleProps, className && {
-    className: [styleProps.className, className].join(' ').trim()
+  var propsForSpread = propsDecorator(_extends({}, styleProps, mappedClassNames.length > 0 && {
+    className: mappedClassNames.join(' ')
   }));
@@ -145,0 +159,0 @@

lib/types.js

@@ -20,6 +20,3 @@ 'use strict';
 
-var ClassNamesPT = _propTypes2.default.objectOf(_propTypes2.default.shape({
-  className: _propTypes2.default.string,
-  classNames: ClassNamesPT
-}));
+var ClassNamesPT = _propTypes2.default.objectOf(_propTypes2.default.string);
 
@@ -26,0 +23,0 @@ var PropTypes = exports.PropTypes = {

package.json

 {
   "name": "substyle",
-  "version": "5.1.2",
+  "version": "6.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

Worsened metrics

Total package byte prevSize

43839

decreased by-6.45%

Number of package files

15

decreased by-6.25%

Lines of code

364

decreased by-13.33%

No dependency changes