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

Comparing version 1.12.1 to 1.12.2-next.0

CHANGELOG.md

 # Change Log
 
+## 1.12.2-next.0
+
+### Patch Changes
+
+- [`1d4b1f874`](https://github.com/chakra-ui/chakra-ui/commit/1d4b1f87498c2d843cd21c24e86085d812a1de07)
+  [#4460](https://github.com/chakra-ui/chakra-ui/pull/4460) Thanks
+  [@primos63](https://github.com/primos63)! - Corrected parseGradient function
+  so that it checks for CSS functions.
+
+  Previously, using the CSS `calc` function would result in invalid CSS being
+  generated.
+
+  The expectation is that
+
+  ```jsx
+  <Heading bgGradient="linear(to-r, green.200, pink.500 calc(20px + 20px))">
+    Chakra-UI: Create accessible React apps with speed
+  </Heading>
+  ```
+
+  functions similar to `linear-gradient` which handles using a CSS function
+
+  ```jsx
+  <Heading
+    bgImage="linear-gradient(
+      to right,
+      var(--chakra-colors-green-200)),
+      var(--chakra-colors-pink-500 calc(20px + 20px))"
+  >
+    Chakra-UI: Create accessible React apps with speed
+  </Heading>
+  ```
+
+* [`270b71ebb`](https://github.com/chakra-ui/chakra-ui/commit/270b71ebbb2bd9007d2e138e432675991d94f18d)
+  [#4368](https://github.com/chakra-ui/chakra-ui/pull/4368) Thanks
+  [@avendiart](https://github.com/avendiart)! - Grid props type definitions now
+  correclty reflect the implemented behavior in regard to tokens.
+* Updated dependencies
+  [[`4c1071969`](https://github.com/chakra-ui/chakra-ui/commit/4c1071969a9b41a952b374f9990ac0bb89d24fa0),
+  [`43f66097b`](https://github.com/chakra-ui/chakra-ui/commit/43f66097b39f1c37a4627dd6ca8a85555f35b95c)]:
+  - @chakra-ui/utils@1.8.2-next.0
+
 ## 1.12.1
@@ -4,0 +46,0 @@

dist/cjs/utils/parse-gradient.js

@@ -5,4 +5,6 @@ "use strict";
 exports.parseGradient = parseGradient;
-exports.gradientTransform = exports.globalSet = void 0;
+exports.gradientTransform = exports.isCSSFunction = exports.globalSet = void 0;
 
+var _utils = require("@chakra-ui/utils");
+
 function _wrapRegExp(re, groups) { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, undefined, groups); }; var _RegExp = _wrapNativeSuper(RegExp); var _super = RegExp.prototype; var _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = _RegExp.call(this, re, flags); _groups.set(_this, groups || _groups.get(re)); return _this; } _inherits(BabelRegExp, _RegExp); BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); if (result) result.groups = buildGroups(result, this); return result; }; BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if (typeof substitution === "string") { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) { return "$" + groups[name]; })); } else if (typeof substitution === "function") { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = []; args.push.apply(args, arguments); if (typeof args[args.length - 1] !== "object") { args.push(buildGroups(args, _this)); } return substitution.apply(this, args); }); } else { return _super[Symbol.replace].call(this, str, substitution); } }; function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { groups[name] = result[g[name]]; return groups; }, Object.create(null)); } return _wrapRegExp.apply(this, arguments); }
@@ -74,12 +76,15 @@
     // if stop is valid shorthand direction, return it
-    if (valueSet.has(stop)) return stop; // color stop could be `red.200 20%` based on css gradient spec
+    if (valueSet.has(stop)) return stop;
+    var firstStop = stop.indexOf(" "); // color stop could be `red.200 20%` based on css gradient spec
 
-    var _stop$split = stop.split(" "),
-        _color = _stop$split[0],
-        _stop = _stop$split[1]; // else, get and transform the color token or css value
+    var _ref2 = firstStop !== -1 ? [stop.substr(0, firstStop), stop.substr(firstStop + 1)] : [stop],
+        _color = _ref2[0],
+        _stop = _ref2[1];
 
+    var _stopOrFunc = isCSSFunction(_stop) ? _stop : _stop && _stop.split(" "); // else, get and transform the color token or css value
 
+
     var key = "colors." + _color;
     var color = key in theme.__cssMap ? theme.__cssMap[key].varRef : _color;
-    return _stop ? [color, _stop].join(" ") : color;
+    return _stopOrFunc ? [color, _stopOrFunc].join(" ") : color;
   });
@@ -90,2 +95,8 @@
 
+var isCSSFunction = function isCSSFunction(value) {
+  return (0, _utils.isString)(value) && value.includes("(") && value.includes(")");
+};
+
+exports.isCSSFunction = isCSSFunction;
+
 var gradientTransform = function gradientTransform(value, theme) {
@@ -92,0 +103,0 @@ return parseGradient(value, theme != null ? theme : {});

dist/cjs/utils/transform-functions.js

@@ -88,3 +88,3 @@ "use strict";
 
-    var prevent = isCSSFunction(value) || _parseGradient.globalSet.has(value);
+    var prevent = (0, _parseGradient.isCSSFunction)(value) || _parseGradient.globalSet.has(value);
 
@@ -118,6 +118,2 @@ return !prevent ? "url(" + value + ")" : value;
 exports.transformFunctions = transformFunctions;
-
-var isCSSFunction = function isCSSFunction(value) {
-  return (0, _utils.isString)(value) && value.includes("(") && value.includes(")");
-};
 //# sourceMappingURL=transform-functions.js.map

dist/esm/utils/parse-gradient.js

@@ -21,2 +21,3 @@ function _wrapRegExp(re, groups) { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, undefined, groups); }; var _RegExp = _wrapNativeSuper(RegExp); var _super = RegExp.prototype; var _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = _RegExp.call(this, re, flags); _groups.set(_this, groups || _groups.get(re)); return _this; } _inherits(BabelRegExp, _RegExp); BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); if (result) result.groups = buildGroups(result, this); return result; }; BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if (typeof substitution === "string") { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) { return "$" + groups[name]; })); } else if (typeof substitution === "function") { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = []; args.push.apply(args, arguments); if (typeof args[args.length - 1] !== "object") { args.push(buildGroups(args, _this)); } return substitution.apply(this, args); }); } else { return _super[Symbol.replace].call(this, str, substitution); } }; function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { groups[name] = result[g[name]]; return groups; }, Object.create(null)); } return _wrapRegExp.apply(this, arguments); }
 
+import { isString } from "@chakra-ui/utils";
 var directionMap = {
@@ -62,9 +63,13 @@ "to-t": "to top",
     // if stop is valid shorthand direction, return it
-    if (valueSet.has(stop)) return stop; // color stop could be `red.200 20%` based on css gradient spec
+    if (valueSet.has(stop)) return stop;
+    var firstStop = stop.indexOf(" "); // color stop could be `red.200 20%` based on css gradient spec
 
-    var [_color, _stop] = stop.split(" "); // else, get and transform the color token or css value
+    var [_color, _stop] = firstStop !== -1 ? [stop.substr(0, firstStop), stop.substr(firstStop + 1)] : [stop];
 
+    var _stopOrFunc = isCSSFunction(_stop) ? _stop : _stop && _stop.split(" "); // else, get and transform the color token or css value
+
+
     var key = "colors." + _color;
     var color = key in theme.__cssMap ? theme.__cssMap[key].varRef : _color;
-    return _stop ? [color, _stop].join(" ") : color;
+    return _stopOrFunc ? [color, _stopOrFunc].join(" ") : color;
   });
@@ -74,3 +79,6 @@
 }
+export var isCSSFunction = value => {
+  return isString(value) && value.includes("(") && value.includes(")");
+};
 export var gradientTransform = (value, theme) => parseGradient(value, theme != null ? theme : {});
 //# sourceMappingURL=parse-gradient.js.map

dist/esm/utils/transform-functions.js

 import { isCssVar, isNumber, isString } from "@chakra-ui/utils";
 import { backdropFilterTemplate, filterTemplate, getRingTemplate, getTransformGpuTemplate, getTransformTemplate, flexDirectionTemplate } from "./templates";
-import { gradientTransform, globalSet } from "./parse-gradient";
+import { gradientTransform, globalSet, isCSSFunction } from "./parse-gradient";
 
@@ -115,6 +115,2 @@ var analyzeCSSValue = value => {
 };
-
-var isCSSFunction = value => {
-  return isString(value) && value.includes("(") && value.includes(")");
-};
 //# sourceMappingURL=transform-functions.js.map

dist/types/config/grid.d.ts

@@ -13,3 +13,3 @@ import * as CSS from "csstype";
      */
-    gridGap?: Token<CSS.Property.GridGap | number, "sizes">;
+    gridGap?: Token<CSS.Property.GridGap | number, "space">;
     /**
@@ -22,3 +22,3 @@ * The CSS `grid-column-gap` property.
      */
-    gridColumnGap?: Token<CSS.Property.GridColumnGap | number, "sizes">;
+    gridColumnGap?: Token<CSS.Property.GridColumnGap | number, "space">;
     /**
@@ -31,3 +31,3 @@ * The CSS `grid-row-gap` property.
      */
-    gridRowGap?: Token<CSS.Property.GridRowGap | number, "sizes">;
+    gridRowGap?: Token<CSS.Property.GridRowGap | number, "space">;
     /**
@@ -116,3 +116,3 @@ * The CSS `grid-column` property.
      */
-    gridAutoColumns?: Token<CSS.Property.GridAutoColumns | number, "sizes">;
+    gridAutoColumns?: Token<CSS.Property.GridAutoColumns>;
     /**
@@ -125,3 +125,3 @@ * The CSS `grid-auto-rows` property.
      */
-    gridAutoRows?: Token<CSS.Property.GridAutoRows | number, "sizes">;
+    gridAutoRows?: Token<CSS.Property.GridAutoRows>;
     /**
@@ -134,3 +134,3 @@ * The CSS `grid-template-columns` property
      */
-    gridTemplateColumns?: Token<CSS.Property.GridTemplateColumns | number, "sizes">;
+    gridTemplateColumns?: Token<CSS.Property.GridTemplateColumns>;
     /**
@@ -143,3 +143,3 @@ * The CSS `grid-template-rows` property.
      */
-    gridTemplateRows?: Token<CSS.Property.GridTemplateRows | number, "sizes">;
+    gridTemplateRows?: Token<CSS.Property.GridTemplateRows>;
     /**
@@ -146,0 +146,0 @@ * The CSS `grid-template-areas` property.

dist/types/config/others.d.ts

@@ -24,2 +24,9 @@ import { Config } from "../utils/prop-config";
      * Apply theme-aware style objects in `theme`
+     *
+     * @example
+     * ```jsx
+     * <Box apply="styles.h3">This is a div</Box>
+     * ```
+     *
+     * This will apply styles defined in `theme.styles.h3`
      */
@@ -26,0 +33,0 @@ apply?: ResponsiveValue<string>;

dist/types/utils/parse-gradient.d.ts

@@ -5,3 +5,4 @@ import { Dict } from "@chakra-ui/utils";
 export declare function parseGradient(value: string | null | undefined, theme: Dict): string | null | undefined;
+export declare const isCSSFunction: (value: unknown) => boolean;
 export declare const gradientTransform: Transform;
 //# sourceMappingURL=parse-gradient.d.ts.map

package.json

 {
   "name": "@chakra-ui/styled-system",
-  "version": "1.12.1",
+  "version": "1.12.2-next.0",
   "description": "Style function for css-in-js building component libraries",
@@ -38,3 +38,4 @@ "keywords": [
     "type": "git",
-    "url": "git+https://github.com/chakra-ui/chakra-ui.git"
+    "url": "git+https://github.com/chakra-ui/chakra-ui.git",
+    "directory": "packages/styled-system"
   },
@@ -58,5 +59,5 @@ "bugs": {
   "dependencies": {
-    "@chakra-ui/utils": "1.8.1",
+    "@chakra-ui/utils": "1.8.2-next.0",
     "csstype": "^3.0.6"
   }
 }

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

1011382

increased by0.36%

Lines of code

7558

increased by0.2%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@chakra-ui/utils@1.8.2-next.0(transitive)

• - Removed@chakra-ui/utils@1.8.1(transitive)

• Updated@chakra-ui/utils@1.8.2-next.0