@semcore/flex-box - npm Package Compare versions

Comparing version 4.3.2 to 4.4.0

CHANGELOG.md

@@ -5,2 +5,11 @@ # Changelog
 
+## [4.4.0] - 2021-04-26
+
+### Changed
+
+- Version of dependence `@semcore/core` has been changed to `1.11`.
+- Improved performance. Removed one component wrapper.
+- The style processing system has been changed.
+- Removed the ability to apply media styles via a plugin `babel-plugin-react-semcore`.
+
 ## [4.3.2] - 2021-03-25
@@ -7,0 +16,0 @@

lib/cjs/Box/useBox.js

@@ -17,3 +17,3 @@ "use strict";
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _core = require("@semcore/core");
 
@@ -24,4 +24,2 @@ var _react = require("react");
 
-var _core = require("@semcore/core");
-
 var _propsForElement = _interopRequireDefault(require("@semcore/utils/lib/propsForElement"));
@@ -36,21 +34,20 @@
 /*__reshadow-styles__:"../style/use-box.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-(0, _core.__css__)(
+_core.sstyled.insert(
 /*__inner_css_start__*/
-"._box-sizing_vi6ke_gg_{box-sizing:border-box}._box-inline_1lm0z_gg_{display:inline-block}"
+".___SBoxSizing_d1krt_gg_{box-sizing:border-box}.___SBoxInline_d1krt_gg_{display:inline-block}"
 /*__inner_css_end__*/
-, "1n1tuve_gg_")
+, "c2jjx9_gg_")
 /*__reshadow_css_end__*/
 , {
-  "box-sizing": "_box-sizing_vi6ke_gg_",
-  "box-inline": "_box-inline_1lm0z_gg_"
-}),
-    style = (0, _extends2["default"])({}, _ref);
+  "__SBoxSizing": "___SBoxSizing_d1krt_gg_",
+  "__SBoxInline": "___SBoxInline_d1krt_gg_"
+});
 
 function removeUndefinedKeys(obj) {
-  return Object.entries(obj).reduce(function (acc, _ref2) {
-    var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
-        key = _ref3[0],
-        value = _ref3[1];
+  return Object.entries(obj).reduce(function (acc, _ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
 
@@ -123,7 +120,3 @@ if (value !== undefined) {
 
-var styled_c8 = (0, _core.create)([style]);
-
 function useBox(props, ref) {
-  var _cn;
-
   var _props$tag = props.tag,
@@ -170,10 +163,11 @@ Tag = _props$tag === void 0 ? 'div' : _props$tag,
 
-  var _styled = (0, _core.styled)(((0, _core.set)([styled_c8]), (0, _core.__extract__)())),
-      styles = _styled.styles;
-
   _logger["default"].warn(css !== undefined, "The 'css' property is deprecated, use 'style'", other['data-ui-name'] || 'Box');
 
+  var styles = (0, _core.sstyled)(style);
   return [Tag, _objectSpread({
     ref: ref,
-    className: (0, _classnames["default"])((_cn = {}, (0, _defineProperty2["default"])(_cn, styles['box-sizing'], boxSizing), (0, _defineProperty2["default"])(_cn, styles['box-inline'], inline), _cn), className) || undefined,
+    className: (0, _classnames["default"])(styles.cn('SBox', {
+      SBoxSizing: boxSizing,
+      SBoxInline: inline
+    }).className, className) || undefined,
     style: Object.assign({}, styleProp, css, indentStyles),
@@ -180,0 +174,0 @@ 'data-ui-name': 'Box'

lib/cjs/Flex/useFlex.js

@@ -18,3 +18,3 @@ "use strict";
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _core = require("@semcore/core");
 
@@ -25,4 +25,2 @@ var _react = require("react");
 
-var _core = require("@semcore/core");
-
 var _useBox3 = _interopRequireWildcard(require("../Box/useBox"));
@@ -35,15 +33,14 @@
 /*__reshadow-styles__:"../style/use-flex.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-(0, _core.__css__)(
+_core.sstyled.insert(
 /*__inner_css_start__*/
-"._flex_e72hl_gg_{display:flex}._flex-inline_cgdz8_gg_{display:inline-flex}"
+".___SFlex_11qft_gg_{display:flex}.___SFlex_11qft_gg_.__inline_11qft_gg_{display:inline-flex}"
 /*__inner_css_end__*/
-, "momq5f_gg_")
+, "s4gfms_gg_")
 /*__reshadow_css_end__*/
 , {
-  "flex": "_flex_e72hl_gg_",
-  "flex-inline": "_flex-inline_cgdz8_gg_"
-}),
-    style = (0, _extends2["default"])({}, _ref);
+  "__SFlex": "___SFlex_11qft_gg_",
+  "_inline": "__inline_11qft_gg_"
+});
 
@@ -60,7 +57,3 @@ function calculateFlexStyles(props) {
 
-var styled_c8 = (0, _core.create)([style]);
-
 function useFlex(props, ref) {
-  var _cn;
-
   var _useBox = (0, _useBox3["default"])(_objectSpread(_objectSpread({
@@ -89,8 +82,7 @@ 'data-ui-name': 'Flex'
   }, [flexWrap, direction, reverse, alignItems, alignContent, justifyContent]);
-
-  var _styled = (0, _core.styled)(((0, _core.set)([styled_c8]), (0, _core.__extract__)())),
-      styles = _styled.styles;
-
+  var styles = (0, _core.sstyled)(style);
   return [Tag, _objectSpread({
-    className: (0, _classnames["default"])((_cn = {}, (0, _defineProperty2["default"])(_cn, styles['flex'], !inline), (0, _defineProperty2["default"])(_cn, styles['flex-inline'], inline), _cn), className),
+    className: (0, _classnames["default"])(styles.cn('SFlex', {
+      inline: inline
+    }).className, className) || undefined,
     style: Object.assign({}, styleProp, flexStyles)
@@ -97,0 +89,0 @@ }, other)];

lib/es6/Box/useBox.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _extends from "@babel/runtime/helpers/extends";
+import { sstyled as _sstyled } from "@semcore/core";
 
@@ -13,3 +13,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 import cn from 'classnames';
-import { styled, css, __css__, __extract__, set, create } from '@semcore/core';
+import { sstyled } from '@semcore/core';
 import propsForElement from '@semcore/utils/lib/propsForElement';
@@ -19,21 +19,19 @@ import logger from '@semcore/utils/lib/logger';
 /*__reshadow-styles__:"../style/use-box.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-__css__(
+_sstyled.insert(
 /*__inner_css_start__*/
-"._box-sizing_vi6ke_gg_{box-sizing:border-box}._box-inline_1lm0z_gg_{display:inline-block}"
+".___SBoxSizing_d1krt_gg_{box-sizing:border-box}.___SBoxInline_d1krt_gg_{display:inline-block}"
 /*__inner_css_end__*/
-, "1n1tuve_gg_")
+, "c2jjx9_gg_")
 /*__reshadow_css_end__*/
 , {
-  "box-sizing": "_box-sizing_vi6ke_gg_",
-  "box-inline": "_box-inline_1lm0z_gg_"
-}),
-    style = _extends({}, _ref);
-
+  "__SBoxSizing": "___SBoxSizing_d1krt_gg_",
+  "__SBoxInline": "___SBoxInline_d1krt_gg_"
+});
 export function removeUndefinedKeys(obj) {
-  return Object.entries(obj).reduce(function (acc, _ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-        key = _ref3[0],
-        value = _ref3[1];
+  return Object.entries(obj).reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
 
@@ -106,6 +104,3 @@ if (value !== undefined) {
 
-var styled_c8 = create([style]);
 export default function useBox(props, ref) {
-  var _cn;
-
   var _props$tag = props.tag,
@@ -152,10 +147,10 @@ Tag = _props$tag === void 0 ? 'div' : _props$tag,
   }, [scaleIndent, w, h, wMin, wMax, hMin, hMax, flex, m, mt, mb, my, ml, mr, mx, p, pt, pb, py, pl, pr, px, position, top, left, bottom, right, zIndex]);
-
-  var _styled = styled((set([styled_c8]), __extract__())),
-      styles = _styled.styles;
-
   logger.warn(css !== undefined, "The 'css' property is deprecated, use 'style'", other['data-ui-name'] || 'Box');
+  var styles = sstyled(style);
   return [Tag, _objectSpread({
     ref: ref,
-    className: cn((_cn = {}, _defineProperty(_cn, styles['box-sizing'], boxSizing), _defineProperty(_cn, styles['box-inline'], inline), _cn), className) || undefined,
+    className: cn(styles.cn('SBox', {
+      SBoxSizing: boxSizing,
+      SBoxInline: inline
+    }).className, className) || undefined,
     style: Object.assign({}, styleProp, css, indentStyles),
@@ -162,0 +157,0 @@ 'data-ui-name': 'Box'

lib/es6/Flex/useFlex.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _extends from "@babel/runtime/helpers/extends";
+import { sstyled as _sstyled } from "@semcore/core";
 
@@ -13,19 +13,18 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 import cn from 'classnames';
-import { styled, css, __css__, __extract__, set, create } from '@semcore/core';
+import { sstyled } from '@semcore/core';
 import useBox, { removeUndefinedKeys } from '../Box/useBox';
 
 /*__reshadow-styles__:"../style/use-flex.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-__css__(
+_sstyled.insert(
 /*__inner_css_start__*/
-"._flex_e72hl_gg_{display:flex}._flex-inline_cgdz8_gg_{display:inline-flex}"
+".___SFlex_11qft_gg_{display:flex}.___SFlex_11qft_gg_.__inline_11qft_gg_{display:inline-flex}"
 /*__inner_css_end__*/
-, "momq5f_gg_")
+, "s4gfms_gg_")
 /*__reshadow_css_end__*/
 , {
-  "flex": "_flex_e72hl_gg_",
-  "flex-inline": "_flex-inline_cgdz8_gg_"
-}),
-    style = _extends({}, _ref);
+  "__SFlex": "___SFlex_11qft_gg_",
+  "_inline": "__inline_11qft_gg_"
+});
 
@@ -42,6 +41,3 @@ function calculateFlexStyles(props) {
 
-var styled_c8 = create([style]);
 export default function useFlex(props, ref) {
-  var _cn;
-
   var _useBox = useBox(_objectSpread(_objectSpread({
@@ -70,8 +66,7 @@ 'data-ui-name': 'Flex'
   }, [flexWrap, direction, reverse, alignItems, alignContent, justifyContent]);
-
-  var _styled = styled((set([styled_c8]), __extract__())),
-      styles = _styled.styles;
-
+  var styles = sstyled(style);
   return [Tag, _objectSpread({
-    className: cn((_cn = {}, _defineProperty(_cn, styles['flex'], !inline), _defineProperty(_cn, styles['flex-inline'], inline), _cn), className),
+    className: cn(styles.cn('SFlex', {
+      inline: inline
+    }).className, className) || undefined,
     style: Object.assign({}, styleProp, flexStyles)
@@ -78,0 +73,0 @@ }, other)];

package.json

 {
   "name": "@semcore/flex-box",
   "description": "SEMRush FlexBox Component",
-  "version": "4.3.2",
+  "version": "4.4.0",
   "main": "lib/cjs/index.js",
@@ -23,3 +23,3 @@ "module": "lib/es6/index.js",
   "peerDependencies": {
-    "@semcore/core": "^1",
+    "@semcore/core": "^1.11",
     "react": "16.8 - 17"
@@ -26,0 +26,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

Worsened metrics

Total package byte prevSize

90224

decreased by-0.74%

Lines of code

1132

decreased by-0.7%

No dependency changes