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

Comparing version 2.5.2 to 2.6.0

dist/index.js

@@ -215,15 +215,2 @@ "use strict";
 };
-var owlSelector = "& > :not(style) ~ :not(style)";
-var spaceXTemplate = {
-  [owlSelector]: {
-    marginInlineStart: "calc(var(--chakra-space-x) * calc(1 - var(--chakra-space-x-reverse)))",
-    marginInlineEnd: "calc(var(--chakra-space-x) * var(--chakra-space-x-reverse))"
-  }
-};
-var spaceYTemplate = {
-  [owlSelector]: {
-    marginTop: "calc(var(--chakra-space-y) * calc(1 - var(--chakra-space-y-reverse)))",
-    marginBottom: "calc(var(--chakra-space-y) * var(--chakra-space-y-reverse))"
-  }
-};
 
@@ -252,7 +239,8 @@ // src/utils/parse-gradient.ts
 function parseGradient(value, theme) {
-  var _a, _b;
   if (value == null || globalSet.has(value))
     return value;
-  const regex = /(?<type>^[a-z-A-Z]+)\((?<values>(.*))\)/g;
-  const { type, values } = (_b = (_a = regex.exec(value)) == null ? void 0 : _a.groups) != null ? _b : {};
+  const regex = /(^[a-z-A-Z]+)\((.*)\)/g;
+  const results = regex.exec(value);
+  const type = results == null ? void 0 : results[1];
+  const values = results == null ? void 0 : results[2];
   if (!type || !values)
@@ -613,16 +601,2 @@ return value;
   flexDirection: { transform: transformFunctions.flexDirection },
-  experimental_spaceX: {
-    static: spaceXTemplate,
-    transform: createTransform({
-      scale: "space",
-      transform: (value) => value !== null ? { "--chakra-space-x": value } : null
-    })
-  },
-  experimental_spaceY: {
-    static: spaceYTemplate,
-    transform: createTransform({
-      scale: "space",
-      transform: (value) => value != null ? { "--chakra-space-y": value } : null
-    })
-  },
   flex: true,
@@ -702,2 +676,22 @@ flexFlow: true,
   display: true,
+  hideFrom: {
+    scale: "breakpoints",
+    transform: (value, theme) => {
+      var _a, _b;
+      const { minWQuery = value } = (_b = (_a = theme.__breakpoints) == null ? void 0 : _a.get(value)) != null ? _b : {};
+      return {
+        [`@media screen and (min-width: ${minWQuery})`]: { display: "none" }
+      };
+    }
+  },
+  hideBelow: {
+    scale: "breakpoints",
+    transform: (value, theme) => {
+      var _a, _b;
+      const { maxWQuery = value } = (_b = (_a = theme.__breakpoints) == null ? void 0 : _a.get(value)) != null ? _b : {};
+      return {
+        [`@media screen and (max-width: ${maxWQuery})`]: { display: "none" }
+      };
+    }
+  },
   verticalAlign: true,
@@ -1161,2 +1155,5 @@ boxSizing: true,
     details: queries,
+    get(key) {
+      return queries.find((q) => q.breakpoint === key);
+    },
     media: [
@@ -1386,3 +1383,4 @@ null,
   "transition",
-  "blur"
+  "blur",
+  "breakpoints"
 ];
@@ -1389,0 +1387,0 @@ function extractTokens(theme) {

package.json

 {
   "name": "@chakra-ui/styled-system",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "description": "Style function for css-in-js building component libraries",
@@ -45,3 +45,3 @@ "keywords": [
     "clean-package": "2.1.1",
-    "@chakra-ui/breakpoint-utils": "2.0.7",
+    "@chakra-ui/breakpoint-utils": "2.0.8",
     "@chakra-ui/merge-utils": "2.0.7",
@@ -48,0 +48,0 @@ "@chakra-ui/object-utils": "2.0.8"

No alert changes

Worsened metrics

Total package byte prevSize

207811

decreased by-0.14%

Lines of code

6273

decreased by-0.06%

No dependency changes