@chakra-ui/styled-system - npm Package Compare versions

Comparing version 1.0.0-rc.3 to 1.0.0-rc.4

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+# 1.0.0-rc.4 (2020-09-25)
+
+**Note:** Version bump only for package @chakra-ui/styled-system
+
+
+
+
+
 # 1.0.0-rc.3 (2020-08-30)
@@ -8,0 +16,0 @@

dist/cjs/css.js

@@ -18,24 +18,70 @@ "use strict";
 
-var defaultBreakpoints = ["40em", "52em", "64em"];
+var cache = {
+  themeBreakpoints: [],
+  breakpoints: [],
+  breakpointValues: [],
+  mediaQueries: []
+};
 
-function getBreakpoints(theme) {
-  var _theme$breakpoints;
+/**
+ *
+ */
+var calculateBreakpointAndMediaQueries = function calculateBreakpointAndMediaQueries(themeBreakpoints) {
+  if (themeBreakpoints === void 0) {
+    themeBreakpoints = [];
+  }
 
-  var breakpoints = (_theme$breakpoints = theme == null ? void 0 : theme.breakpoints) != null ? _theme$breakpoints : defaultBreakpoints;
-  return breakpoints;
-}
+  // caching here reduces execution time by factor 4-6x
+  var isCached = cache.themeBreakpoints === themeBreakpoints;
 
+  if (isCached) {
+    return cache;
+  }
+
+  var _Object$entries$filte = Object.entries(themeBreakpoints).filter(function (_ref) {
+    var key = _ref[0];
+    return (0, _utils.isCustomBreakpoint)(key);
+  }).reduce(function (carry, _ref2) {
+    var breakpoint = _ref2[0],
+        value = _ref2[1];
+    carry.breakpoints.push(breakpoint);
+    carry.breakpointValues.push(value);
+    return carry;
+  }, {
+    breakpoints: [],
+    breakpointValues: []
+  }),
+      breakpoints = _Object$entries$filte.breakpoints,
+      breakpointValues = _Object$entries$filte.breakpointValues;
+
+  var mediaQueries = [null].concat(breakpointValues.map(function (bp) {
+    return "@media screen and (min-width: " + bp + ")";
+  }).slice(1));
+  cache.themeBreakpoints = themeBreakpoints;
+  cache.mediaQueries = mediaQueries;
+  cache.breakpointValues = breakpointValues;
+  cache.breakpoints = breakpoints;
+  return {
+    breakpoints: breakpoints,
+    mediaQueries: mediaQueries
+  };
+};
+
 var responsive = function responsive(styles) {
   return function (theme) {
     var computedStyles = {};
-    var breakpoints = getBreakpoints(theme);
-    var mediaQueries = [null].concat(breakpoints.map(function (n) {
-      return "@media screen and (min-width: " + n + ")";
-    }));
 
+    var _calculateBreakpointA = calculateBreakpointAndMediaQueries(theme.breakpoints),
+        breakpoints = _calculateBreakpointA.breakpoints,
+        mediaQueries = _calculateBreakpointA.mediaQueries;
+
     for (var key in styles) {
-      var value = (0, _utils.runIfFn)(styles[key], theme != null ? theme : {});
-      if (value == null) continue;
-      value = (0, _utils.isResponsiveObjectLike)(value) ? (0, _utils.objectToArrayNotation)(value) : value;
+      var value = (0, _utils.runIfFn)(styles[key], theme);
 
+      if (value == null) {
+        continue;
+      }
+
+      value = (0, _utils.isResponsiveObjectLike)(value, breakpoints) ? (0, _utils.objectToArrayNotation)(value, breakpoints) : value;
+
       if (!(0, _utils.isArray)(value)) {
@@ -57,3 +103,7 @@ computedStyles[key] = value;
         computedStyles[media] = computedStyles[media] || {};
-        if (value[index] == null) continue;
+
+        if (value[index] == null) {
+          continue;
+        }
+
         computedStyles[media][key] = value[index];
@@ -86,4 +136,4 @@ }
       var x = styles[k];
+      var val = (0, _utils.runIfFn)(x, theme);
       var key = k in _pseudo.pseudoSelectors ? _pseudo.pseudoSelectors[k] : k;
-      var val = (0, _utils.runIfFn)(x, theme);
       var config = _parser.parser.config[key];
@@ -106,5 +156,5 @@
       if (config == null ? void 0 : config.properties) {
-        for (var _iterator = _createForOfIteratorHelperLoose(config == null ? void 0 : config.properties), _step; !(_step = _iterator()).done;) {
-          var p = _step.value;
-          computedStyles[p] = value;
+        for (var _iterator = _createForOfIteratorHelperLoose(config.properties), _step; !(_step = _iterator()).done;) {
+          var property = _step.value;
+          computedStyles[property] = value;
         }
@@ -116,3 +166,3 @@
       if (config == null ? void 0 : config.property) {
-        computedStyles[config == null ? void 0 : config.property] = value;
+        computedStyles[config.property] = value;
         continue;
@@ -119,0 +169,0 @@ }

dist/cjs/utils/positive-or-negative.js

@@ -8,2 +8,6 @@ "use strict";
 
+var _cssGetUnit = _interopRequireDefault(require("css-get-unit"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var startsWith = function startsWith(string, target) {
@@ -34,4 +38,11 @@ return string.slice(0, 0 + target.length) == target;
 
-  return result || value;
+  var computedValue = result || value;
+  var hasUnit = (0, _cssGetUnit["default"])(computedValue);
+
+  if (!hasUnit && !isNaN(Number(computedValue))) {
+    computedValue = Number(computedValue);
+  }
+
+  return computedValue;
 }
 //# sourceMappingURL=positive-or-negative.js.map

dist/esm/css.js

@@ -1,23 +0,68 @@
-import { get, isArray, isObject, isResponsiveObjectLike, objectToArrayNotation, runIfFn, merge } from "@chakra-ui/utils";
+import { get, isArray, isObject, isResponsiveObjectLike, objectToArrayNotation, runIfFn, merge, isCustomBreakpoint } from "@chakra-ui/utils";
 import { pseudoSelectors } from "./pseudo";
 import { parser } from "./parser";
-var defaultBreakpoints = ["40em", "52em", "64em"];
+var cache = {
+  themeBreakpoints: [],
+  breakpoints: [],
+  breakpointValues: [],
+  mediaQueries: []
+};
 
-function getBreakpoints(theme) {
-  var _theme$breakpoints;
+/**
+ *
+ */
+var calculateBreakpointAndMediaQueries = function calculateBreakpointAndMediaQueries(themeBreakpoints) {
+  if (themeBreakpoints === void 0) {
+    themeBreakpoints = [];
+  }
 
-  var breakpoints = (_theme$breakpoints = theme == null ? void 0 : theme.breakpoints) != null ? _theme$breakpoints : defaultBreakpoints;
-  return breakpoints;
-}
+  // caching here reduces execution time by factor 4-6x
+  var isCached = cache.themeBreakpoints === themeBreakpoints;
 
+  if (isCached) {
+    return cache;
+  }
+
+  var {
+    breakpoints,
+    breakpointValues
+  } = Object.entries(themeBreakpoints).filter((_ref) => {
+    var [key] = _ref;
+    return isCustomBreakpoint(key);
+  }).reduce((carry, _ref2) => {
+    var [breakpoint, value] = _ref2;
+    carry.breakpoints.push(breakpoint);
+    carry.breakpointValues.push(value);
+    return carry;
+  }, {
+    breakpoints: [],
+    breakpointValues: []
+  });
+  var mediaQueries = [null, ...breakpointValues.map(bp => "@media screen and (min-width: " + bp + ")").slice(1)];
+  cache.themeBreakpoints = themeBreakpoints;
+  cache.mediaQueries = mediaQueries;
+  cache.breakpointValues = breakpointValues;
+  cache.breakpoints = breakpoints;
+  return {
+    breakpoints,
+    mediaQueries
+  };
+};
+
 var responsive = styles => theme => {
   var computedStyles = {};
-  var breakpoints = getBreakpoints(theme);
-  var mediaQueries = [null, ...breakpoints.map(n => "@media screen and (min-width: " + n + ")")];
+  var {
+    breakpoints,
+    mediaQueries
+  } = calculateBreakpointAndMediaQueries(theme.breakpoints);
 
   for (var key in styles) {
-    var value = runIfFn(styles[key], theme != null ? theme : {});
-    if (value == null) continue;
-    value = isResponsiveObjectLike(value) ? objectToArrayNotation(value) : value;
+    var value = runIfFn(styles[key], theme);
 
+    if (value == null) {
+      continue;
+    }
+
+    value = isResponsiveObjectLike(value, breakpoints) ? objectToArrayNotation(value, breakpoints) : value;
+
     if (!isArray(value)) {
@@ -39,3 +84,7 @@ computedStyles[key] = value;
       computedStyles[media] = computedStyles[media] || {};
-      if (value[index] == null) continue;
+
+      if (value[index] == null) {
+        continue;
+      }
+
       computedStyles[media][key] = value[index];
@@ -67,4 +116,4 @@ }
       var x = styles[k];
+      var val = runIfFn(x, theme);
       var key = k in pseudoSelectors ? pseudoSelectors[k] : k;
-      var val = runIfFn(x, theme);
       var config = parser.config[key];
@@ -87,4 +136,4 @@
       if (config == null ? void 0 : config.properties) {
-        for (var p of config == null ? void 0 : config.properties) {
-          computedStyles[p] = value;
+        for (var property of config.properties) {
+          computedStyles[property] = value;
         }
@@ -96,3 +145,3 @@
       if (config == null ? void 0 : config.property) {
-        computedStyles[config == null ? void 0 : config.property] = value;
+        computedStyles[config.property] = value;
         continue;
@@ -99,0 +148,0 @@ }

dist/esm/utils/positive-or-negative.js

 import { isString, isNumber } from "@chakra-ui/utils";
+import unit from "css-get-unit";
 
@@ -26,4 +27,11 @@ var startsWith = (string, target) => string.slice(0, 0 + target.length) == target;
 
-  return result || value;
+  var computedValue = result || value;
+  var hasUnit = unit(computedValue);
+
+  if (!hasUnit && !isNaN(Number(computedValue))) {
+    computedValue = Number(computedValue);
+  }
+
+  return computedValue;
 }
 //# sourceMappingURL=positive-or-negative.js.map

dist/types/css.types.d.ts

@@ -86,3 +86,3 @@ import { ResponsiveValue } from "./utils";
      */
-    apply?: string;
+    apply?: ResponsiveValue<string>;
 }
@@ -89,0 +89,0 @@ declare type PseudoStyles = {

package.json

 {
   "name": "@chakra-ui/styled-system",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.4",
   "description": "Style function for css-in-js building component libraries",
@@ -51,4 +51,5 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/utils": "1.0.0-rc.3",
+    "@chakra-ui/utils": "1.0.0-rc.4",
     "@styled-system/core": "5.1.2",
+    "css-get-unit": "1.0.1",
     "csstype": "3.0.3"
@@ -59,3 +60,3 @@ },
   },
-  "gitHead": "a0b689f3a2b1589d58e4d9b0c8a9bbd02ed90f6e"
+  "gitHead": "830b8587c572a4c20d6b56b256accd6686255819"
 }

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

309684

increased by5.97%

Number of package files

164

increased by6.49%

Lines of code

3937

increased by5.32%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedcss-get-unit@1.0.1

• + Added@chakra-ui/utils@1.0.0-rc.4(transitive)

• + Added@types/lodash.mergewith@4.6.6(transitive)

• + Added@types/object-assign@4.0.30(transitive)

• + Addedcss-get-unit@1.0.1(transitive)

• + Addedlodash.mergewith@4.6.2(transitive)

• - Removed@chakra-ui/utils@1.0.0-rc.3(transitive)

• Updated@chakra-ui/utils@1.0.0-rc.4