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

Comparing version 1.2.0 to 1.3.0

CHANGELOG.md

 # Change Log
 
+## 1.3.0
+
+### Minor Changes
+
+- [`a0e0bd9a`](https://github.com/chakra-ui/chakra-ui/commit/a0e0bd9a5d45fe08887f8df8d3eccc84951578df)
+  [#2816](https://github.com/chakra-ui/chakra-ui/pull/2816) Thanks
+  [@segunadebayo](https://github.com/segunadebayo)! - Add gradient support to
+  chakra style props. This PR adds to props:
+
+  - `bgGradient`: a shorthand, convenient style prop to apply theme-aware
+    gradients.
+  - `bgClip`: a shorthand for `background-clip` CSS attribute. Useful when
+    creating text gradients.
+  - `backgroundClip`: the typical `background-clip` CSS attribute. Useful when
+    creating text gradients.
+
+  ## The Background Gradient API
+
+  To add a gradient to a component, pass the `bgGradient` prop and set its value
+  following the API below:
+
+  - `linear(<direction>, <from>, <to>)`
+  - `radial(<from>, <to>)`
+
+  and other valid css gradient properties. For linear gradients, the direction
+  can be either of the following values:
+
+  ```js
+  "to-t" // 'to top'
+  "to-tr" // 'to top right'
+  "to-r" // 'to right'
+  "to-br" // 'to bottom right'
+  "to-b" // 'to bottom'
+  "to-bl" // 'to bottom left'
+  "to-l" // 'to left'
+  "to-tl" // 'to top left'
+  ```
+
+  ```jsx
+  <Box w="500px" h="200px" bgGradient="linear(to-r, gray.300, pink.200)" />
+  ```
+
+  You can use both theme-aware color tokens or raw CSS color values.
+
+  ```jsx
+  <Box w="500px" h="200px" bgGradient="linear(to-l, #7928CA, #FF0080)" />
+  ```
+
+  ### Multiple Color Stops
+
+  This is a gradient with multiple stops
+
+  ```jsx
+  <Box w="500px" h="200px" bgGradient="radial(gray.300,yellow.400,pink.200)" />
+  ```
+
+  ## The Text Gradient API
+
+  To add a text gradient, pass the `bgGradient` following the API and `bgClip`
+  prop to `text`.
+
+  ```jsx
+  <Text
+    bgGradient="linear(to-l,#7928CA,#FF0080)"
+    bgClip="text"
+    fontSize="7xl"
+    fontWeight="extrabold"
+  >
+    Welcome to Chakra UI
+  </Text>
+  ```
+
+* [`4fa07745`](https://github.com/chakra-ui/chakra-ui/commit/4fa077453a5c2165b695198c57366f3cc6506c37)
+  Thanks [@segunadebayo](https://github.com/segunadebayo)! - ## Improve
+  performance
+
+  Styled system core functions use `localCompare` to sort the transformed styles
+  before passing it to emotion. This seems to be slower compared to its
+  alternative `Intl.Collator`.
+
+  Here's a benchmark I ran on my Chrome, Macbook Pro:
+
+  ```js
+  // Create an array of 2000 random items
+  const arr = []
+  for (let i = 0; i < 2000; i++) {
+    arr.push(`test-${Math.random()}`)
+  }
+
+  // #1 - localeCompare: 169.665ms
+  arr.sort((a, b) =>
+    a.localeCompare(b, undefined, {
+      numeric: true,
+      sensitivity: "base",
+    }),
+  )
+
+  // #2 - collator: 10.915ms
+  const collator = new Intl.Collator("en", {
+    numeric: true,
+    sensitivity: "base",
+  })
+  arr.sort((a, b) => collator.compare(a, b))
+  ```
+
+  To improve performance, I had to do the following:
+
+  - Move the core functions from `@styled-system/core` into our own codebase (we
+    could create a PR to styled-system to improve the community)
+  - Rewrite the functions to TypeScript. Since they're written in JavaScript
+  - Change the sorting function to use `Intl.Collator`
+  - Change the `merge` function to use `lodash.mergeWith`
+
+  To learn more, check
+  [here](https://stackoverflow.com/questions/14677060/400x-sorting-speedup-by-switching-a-localecompareb-to-ab-1ab10/25775469)
+  to see this benchmark.
+
 ## 1.2.0
@@ -4,0 +121,0 @@

dist/cjs/config/background.js

@@ -6,6 +6,17 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("../core");
 
 var _utils = require("../utils");
 
+var _parseGradient = require("../utils/parse-gradient");
+
+function transformBgClip(value) {
+  return value === "text" ? {
+    WebkitTextFillColor: "transparent",
+    backgroundClip: "text"
+  } : {
+    backgroundClip: value
+  };
+}
+
 var config = {
@@ -22,2 +33,6 @@ bg: _utils.t.colors("background"),
   backgroundBlendMode: true,
+  backgroundClip: {
+    property: "&",
+    transform: transformBgClip
+  },
   bgImage: _utils.t.prop("backgroundImage"),
@@ -30,3 +45,11 @@ bgImg: _utils.t.prop("backgroundImage"),
   bgRepeat: _utils.t.prop("backgroundRepeat"),
-  bgAttachment: _utils.t.prop("backgroundAttachment")
+  bgAttachment: _utils.t.prop("backgroundAttachment"),
+  bgGradient: {
+    property: "backgroundImage",
+    transform: _parseGradient.transformGradient
+  },
+  bgClip: {
+    property: "&",
+    transform: transformBgClip
+  }
 };
@@ -33,0 +56,0 @@ var background = (0, _core.system)(config);

dist/cjs/config/border.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("../core");
 
@@ -113,21 +113,29 @@ var _utils = require("../utils");
 };
-config.roundedTopLeft = config.borderTopLeftRadius;
-config.roundedTopStart = config.borderStartStartRadius;
-config.roundedTopRight = config.borderTopRightRadius;
-config.roundedTopEnd = config.borderStartEndRadius;
-config.roundedBottomLeft = config.borderBottomLeftRadius;
-config.roundedBottomStart = config.borderEndStartRadius;
-config.roundedBottomRight = config.borderBottomRightRadius;
-config.roundedBottomEnd = config.borderEndEndRadius;
-config.rounded = config.borderRadius;
-config.roundedTop = config.borderTopRadius;
-config.roundedBottom = config.borderBottomRadius;
-config.roundedLeft = config.borderLeftRadius;
-config.roundedRight = config.borderRightRadius;
-config.roundedStart = config.borderInlineStartRadius;
-config.borderStartRadius = config.borderInlineStartRadius;
-config.roundedEnd = config.borderInlineEndRadius;
-config.borderEndRadius = config.borderInlineEndRadius;
-config.borderEndWidth = config.borderInlineEndWidth;
-config.borderStartWidth = config.borderInlineStartWidth;
+Object.assign(config, {
+  rounded: config.borderRadius,
+  roundedTopLeft: config.borderTopLeftRadius,
+  roundedTopRight: config.borderTopRightRadius,
+  roundedTopStart: config.borderStartStartRadius,
+  borderTopStartRadius: config.borderStartStartRadius,
+  roundedTopEnd: config.borderStartEndRadius,
+  borderTopEndRadius: config.borderStartEndRadius,
+  roundedBottomLeft: config.borderBottomLeftRadius,
+  roundedBottomRight: config.borderBottomRightRadius,
+  roundedBottomStart: config.borderEndStartRadius,
+  borderBottomStartRadius: config.borderEndStartRadius,
+  roundedBottomEnd: config.borderEndEndRadius,
+  borderBottomEndRadius: config.borderEndEndRadius,
+  roundedTop: config.borderTopRadius,
+  roundedBottom: config.borderBottomRadius,
+  roundedLeft: config.borderLeftRadius,
+  roundedRight: config.borderRightRadius,
+  roundedStart: config.borderInlineStartRadius,
+  roundedEnd: config.borderInlineEndRadius,
+  borderStartRadius: config.borderInlineStartRadius,
+  borderEndRadius: config.borderInlineEndRadius,
+  borderStartWidth: config.borderInlineStartWidth,
+  borderEndWidth: config.borderInlineEndWidth,
+  borderStart: config.borderInlineStart,
+  borderEnd: config.borderInlineEnd
+});
 /**
@@ -134,0 +142,0 @@ * The prop types for border properties listed above

dist/cjs/config/color.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("../core");
 
@@ -9,0 +9,0 @@ var _utils = require("../utils");

dist/cjs/config/flexbox.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("../core");
 
@@ -9,0 +9,0 @@ var _utils = require("../utils");

dist/cjs/config/grid.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("../core");
 
@@ -9,0 +9,0 @@ var _utils = require("../utils");

dist/cjs/config/layout.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("../core");
 
@@ -9,0 +9,0 @@ var _utils = require("../utils");

dist/cjs/config/list.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("../core");
 
@@ -9,0 +9,0 @@ var _utils = require("../utils");

dist/cjs/config/others.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("../core");
 
@@ -9,0 +9,0 @@ var _utils = require("../utils");

dist/cjs/config/outline.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("../core");
 
@@ -9,0 +9,0 @@ var _utils = require("../utils");

dist/cjs/config/position.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("../core");
 
@@ -32,4 +32,6 @@ var _utils = require("../utils");
 };
-config.insetStart = config.insetInlineStart;
-config.insetEnd = config.insetInlineEnd;
+Object.assign(config, {
+  insetStart: config.insetInlineStart,
+  insetEnd: config.insetInlineEnd
+});
 /**
@@ -36,0 +38,0 @@ * Types for position CSS properties

dist/cjs/config/shadow.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("../core");
 
@@ -15,3 +15,5 @@ var _utils = require("../utils");
 };
-config.shadow = config.boxShadow;
+Object.assign(config, {
+  shadow: config.boxShadow
+});
 /**
@@ -18,0 +20,0 @@ * Types for box and text shadow properties

dist/cjs/config/space.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("../core");
 
@@ -39,24 +39,26 @@ var _utils = require("../utils");
 };
-config.m = config.margin;
-config.mt = config.marginTop;
-config.mr = config.marginRight;
-config.me = config.marginInlineEnd;
-config.marginEnd = config.marginInlineEnd;
-config.mb = config.marginBottom;
-config.ml = config.marginLeft;
-config.ms = config.marginInlineStart;
-config.marginStart = config.marginInlineStart;
-config.mx = config.marginX;
-config.my = config.marginY;
-config.p = config.padding;
-config.pt = config.paddingTop;
-config.py = config.paddingY;
-config.px = config.paddingX;
-config.pb = config.paddingBottom;
-config.pl = config.paddingLeft;
-config.ps = config.paddingInlineStart;
-config.paddingStart = config.paddingInlineStart;
-config.pr = config.paddingRight;
-config.pe = config.paddingInlineEnd;
-config.paddingEnd = config.paddingInlineEnd;
+Object.assign(config, {
+  m: config.margin,
+  mt: config.marginTop,
+  mr: config.marginRight,
+  me: config.marginInlineEnd,
+  marginEnd: config.marginInlineEnd,
+  mb: config.marginBottom,
+  ml: config.marginLeft,
+  ms: config.marginInlineStart,
+  marginStart: config.marginInlineStart,
+  mx: config.marginX,
+  my: config.marginY,
+  p: config.padding,
+  pt: config.paddingTop,
+  py: config.paddingY,
+  px: config.paddingX,
+  pb: config.paddingBottom,
+  pl: config.paddingLeft,
+  ps: config.paddingInlineStart,
+  paddingStart: config.paddingInlineStart,
+  pr: config.paddingRight,
+  pe: config.paddingInlineEnd,
+  paddingEnd: config.paddingInlineEnd
+});
 /**
@@ -63,0 +65,0 @@ * Types for space related CSS properties

dist/cjs/config/transform.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("../core");
 
@@ -9,0 +9,0 @@ var config = {

dist/cjs/config/transition.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("../core");
 
@@ -9,0 +9,0 @@ var config = {

dist/cjs/config/typography.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("../core");
 
@@ -9,0 +9,0 @@ var config = {

dist/cjs/index.js

@@ -6,5 +6,6 @@ "use strict";
   createParser: true,
-  compose: true
+  compose: true,
+  system: true
 };
-exports.compose = exports.createParser = void 0;
+exports.system = exports.compose = exports.createParser = void 0;
 
@@ -20,6 +21,7 @@ var _config = require("./config");
 
-var _core = require("@styled-system/core");
+var _core = require("./core");
 
 exports.createParser = _core.createParser;
 exports.compose = _core.compose;
+exports.system = _core.system;
 
@@ -26,0 +28,0 @@ var _pseudo = require("./pseudo");

dist/cjs/parser.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("./core");
 
@@ -9,0 +9,0 @@ var _config = require("./config");

dist/cjs/system.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _core = require("@styled-system/core");
+var _core = require("./core");
 
@@ -9,0 +9,0 @@ var _config = require("./config");

dist/cjs/utils/index.js

@@ -29,2 +29,11 @@ "use strict";
 
+var _sort = require("./sort");
+
+Object.keys(_sort).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _sort[key]) return;
+  exports[key] = _sort[key];
+});
+
 var _types = require("./types");
@@ -31,0 +40,0 @@

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

@@ -8,3 +8,3 @@ "use strict";
 
-var _cssGetUnit = _interopRequireDefault(require("css-get-unit"));
+var _getUnit = _interopRequireDefault(require("./get-unit"));
 
@@ -39,3 +39,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
   var computedValue = result || value;
-  var hasUnit = (0, _cssGetUnit["default"])(computedValue);
+  var hasUnit = (0, _getUnit["default"])(computedValue);
 
@@ -42,0 +42,0 @@ if (!hasUnit && !Number.isNaN(Number(computedValue))) {

dist/esm/config/background.js

@@ -1,3 +0,14 @@
-import { createParser, system } from "@styled-system/core";
+import { createParser, system } from "../core";
 import { t } from "../utils";
+import { transformGradient } from "../utils/parse-gradient";
+
+function transformBgClip(value) {
+  return value === "text" ? {
+    WebkitTextFillColor: "transparent",
+    backgroundClip: "text"
+  } : {
+    backgroundClip: value
+  };
+}
+
 var config = {
@@ -14,2 +25,6 @@ bg: t.colors("background"),
   backgroundBlendMode: true,
+  backgroundClip: {
+    property: "&",
+    transform: transformBgClip
+  },
   bgImage: t.prop("backgroundImage"),
@@ -22,3 +37,11 @@ bgImg: t.prop("backgroundImage"),
   bgRepeat: t.prop("backgroundRepeat"),
-  bgAttachment: t.prop("backgroundAttachment")
+  bgAttachment: t.prop("backgroundAttachment"),
+  bgGradient: {
+    property: "backgroundImage",
+    transform: transformGradient
+  },
+  bgClip: {
+    property: "&",
+    transform: transformBgClip
+  }
 };
@@ -25,0 +48,0 @@ export var background = system(config);

dist/esm/config/border.js

@@ -1,2 +0,2 @@
-import { createParser, system } from "@styled-system/core";
+import { createParser, system } from "../core";
 import { polyfill, t } from "../utils";
@@ -105,21 +105,29 @@ var config = {
 };
-config.roundedTopLeft = config.borderTopLeftRadius;
-config.roundedTopStart = config.borderStartStartRadius;
-config.roundedTopRight = config.borderTopRightRadius;
-config.roundedTopEnd = config.borderStartEndRadius;
-config.roundedBottomLeft = config.borderBottomLeftRadius;
-config.roundedBottomStart = config.borderEndStartRadius;
-config.roundedBottomRight = config.borderBottomRightRadius;
-config.roundedBottomEnd = config.borderEndEndRadius;
-config.rounded = config.borderRadius;
-config.roundedTop = config.borderTopRadius;
-config.roundedBottom = config.borderBottomRadius;
-config.roundedLeft = config.borderLeftRadius;
-config.roundedRight = config.borderRightRadius;
-config.roundedStart = config.borderInlineStartRadius;
-config.borderStartRadius = config.borderInlineStartRadius;
-config.roundedEnd = config.borderInlineEndRadius;
-config.borderEndRadius = config.borderInlineEndRadius;
-config.borderEndWidth = config.borderInlineEndWidth;
-config.borderStartWidth = config.borderInlineStartWidth;
+Object.assign(config, {
+  rounded: config.borderRadius,
+  roundedTopLeft: config.borderTopLeftRadius,
+  roundedTopRight: config.borderTopRightRadius,
+  roundedTopStart: config.borderStartStartRadius,
+  borderTopStartRadius: config.borderStartStartRadius,
+  roundedTopEnd: config.borderStartEndRadius,
+  borderTopEndRadius: config.borderStartEndRadius,
+  roundedBottomLeft: config.borderBottomLeftRadius,
+  roundedBottomRight: config.borderBottomRightRadius,
+  roundedBottomStart: config.borderEndStartRadius,
+  borderBottomStartRadius: config.borderEndStartRadius,
+  roundedBottomEnd: config.borderEndEndRadius,
+  borderBottomEndRadius: config.borderEndEndRadius,
+  roundedTop: config.borderTopRadius,
+  roundedBottom: config.borderBottomRadius,
+  roundedLeft: config.borderLeftRadius,
+  roundedRight: config.borderRightRadius,
+  roundedStart: config.borderInlineStartRadius,
+  roundedEnd: config.borderInlineEndRadius,
+  borderStartRadius: config.borderInlineStartRadius,
+  borderEndRadius: config.borderInlineEndRadius,
+  borderStartWidth: config.borderInlineStartWidth,
+  borderEndWidth: config.borderInlineEndWidth,
+  borderStart: config.borderInlineStart,
+  borderEnd: config.borderInlineEnd
+});
 /**
@@ -126,0 +134,0 @@ * The prop types for border properties listed above

dist/esm/config/color.js

@@ -1,2 +0,2 @@
-import { createParser, system } from "@styled-system/core";
+import { createParser, system } from "../core";
 import { t } from "../utils";
@@ -3,0 +3,0 @@ var config = {

dist/esm/config/flexbox.js

@@ -1,2 +0,2 @@
-import { createParser, system } from "@styled-system/core";
+import { createParser, system } from "../core";
 import { t } from "../utils";
@@ -3,0 +3,0 @@ var config = {

dist/esm/config/grid.js

@@ -1,2 +0,2 @@
-import { createParser, system } from "@styled-system/core";
+import { createParser, system } from "../core";
 import { t } from "../utils";
@@ -3,0 +3,0 @@ var config = {

dist/esm/config/layout.js

@@ -1,2 +0,2 @@
-import { createParser, system } from "@styled-system/core";
+import { createParser, system } from "../core";
 import { t } from "../utils";
@@ -3,0 +3,0 @@ var config = {

dist/esm/config/list.js

@@ -1,2 +0,2 @@
-import { createParser, system } from "@styled-system/core";
+import { createParser, system } from "../core";
 import { t } from "../utils";
@@ -3,0 +3,0 @@ var config = {

dist/esm/config/others.js

@@ -1,2 +0,2 @@
-import { createParser, system } from "@styled-system/core";
+import { createParser, system } from "../core";
 import { getIsRtl } from "../utils";
@@ -3,0 +3,0 @@

dist/esm/config/outline.js

@@ -1,2 +0,2 @@
-import { createParser, system } from "@styled-system/core";
+import { createParser, system } from "../core";
 import { t } from "../utils";
@@ -3,0 +3,0 @@ /**

dist/esm/config/position.js

@@ -1,2 +0,2 @@
-import { createParser, system } from "@styled-system/core";
+import { createParser, system } from "../core";
 import { t } from "../utils";
@@ -24,4 +24,6 @@ var config = {
 };
-config.insetStart = config.insetInlineStart;
-config.insetEnd = config.insetInlineEnd;
+Object.assign(config, {
+  insetStart: config.insetInlineStart,
+  insetEnd: config.insetInlineEnd
+});
 /**
@@ -28,0 +30,0 @@ * Types for position CSS properties

dist/esm/config/shadow.js

@@ -1,2 +0,2 @@
-import { createParser, system } from "@styled-system/core";
+import { createParser, system } from "../core";
 import { t } from "../utils";
@@ -7,3 +7,5 @@ var config = {
 };
-config.shadow = config.boxShadow;
+Object.assign(config, {
+  shadow: config.boxShadow
+});
 /**
@@ -10,0 +12,0 @@ * Types for box and text shadow properties

dist/esm/config/space.js

@@ -1,2 +0,2 @@
-import { createParser, system } from "@styled-system/core";
+import { createParser, system } from "../core";
 import { t } from "../utils";
@@ -31,24 +31,26 @@ var config = {
 };
-config.m = config.margin;
-config.mt = config.marginTop;
-config.mr = config.marginRight;
-config.me = config.marginInlineEnd;
-config.marginEnd = config.marginInlineEnd;
-config.mb = config.marginBottom;
-config.ml = config.marginLeft;
-config.ms = config.marginInlineStart;
-config.marginStart = config.marginInlineStart;
-config.mx = config.marginX;
-config.my = config.marginY;
-config.p = config.padding;
-config.pt = config.paddingTop;
-config.py = config.paddingY;
-config.px = config.paddingX;
-config.pb = config.paddingBottom;
-config.pl = config.paddingLeft;
-config.ps = config.paddingInlineStart;
-config.paddingStart = config.paddingInlineStart;
-config.pr = config.paddingRight;
-config.pe = config.paddingInlineEnd;
-config.paddingEnd = config.paddingInlineEnd;
+Object.assign(config, {
+  m: config.margin,
+  mt: config.marginTop,
+  mr: config.marginRight,
+  me: config.marginInlineEnd,
+  marginEnd: config.marginInlineEnd,
+  mb: config.marginBottom,
+  ml: config.marginLeft,
+  ms: config.marginInlineStart,
+  marginStart: config.marginInlineStart,
+  mx: config.marginX,
+  my: config.marginY,
+  p: config.padding,
+  pt: config.paddingTop,
+  py: config.paddingY,
+  px: config.paddingX,
+  pb: config.paddingBottom,
+  pl: config.paddingLeft,
+  ps: config.paddingInlineStart,
+  paddingStart: config.paddingInlineStart,
+  pr: config.paddingRight,
+  pe: config.paddingInlineEnd,
+  paddingEnd: config.paddingInlineEnd
+});
 /**
@@ -55,0 +57,0 @@ * Types for space related CSS properties

dist/esm/config/transform.js

@@ -1,2 +0,2 @@
-import { createParser, system } from "@styled-system/core";
+import { createParser, system } from "../core";
 var config = {
@@ -3,0 +3,0 @@ transform: true,

dist/esm/config/transition.js

@@ -1,2 +0,2 @@
-import { createParser, system } from "@styled-system/core";
+import { createParser, system } from "../core";
 var config = {
@@ -3,0 +3,0 @@ transition: true,

dist/esm/config/typography.js

@@ -1,2 +0,2 @@
-import { createParser, system } from "@styled-system/core";
+import { createParser, system } from "../core";
 var config = {
@@ -3,0 +3,0 @@ fontFamily: {

dist/esm/index.js

 export * from "./config";
-export { createParser, compose } from "@styled-system/core";
+export { createParser, compose, system } from "./core";
 export * from "./pseudo";
@@ -4,0 +4,0 @@ export * from "./css";

dist/esm/parser.js

@@ -1,4 +0,4 @@
-import { compose } from "@styled-system/core";
+import { compose } from "./core";
 import { backgroundParser, borderParser, colorParser, flexboxParser, gridParser, layoutParser, listParser, othersParser, outlineParser, positionParser, shadowParser, spaceParser, transformParser, transitionParser, typographyParser } from "./config";
 export var parser = compose(backgroundParser, borderParser, colorParser, flexboxParser, layoutParser, outlineParser, gridParser, othersParser, positionParser, shadowParser, spaceParser, typographyParser, transformParser, transitionParser, listParser);
 //# sourceMappingURL=parser.js.map

dist/esm/system.js

@@ -1,2 +0,2 @@
-import { compose } from "@styled-system/core";
+import { compose } from "./core";
 import { background, border, color, flexbox, grid, layout, list, others, outline, position, shadow, space, transform, transition, typography } from "./config";
@@ -3,0 +3,0 @@ import { pseudoPropNames } from "./pseudo";

dist/esm/utils/index.js

 import { get, getWithDefault, isNumber } from "@chakra-ui/utils";
 import { positiveOrNegative } from "./positive-or-negative";
 export * from "./positive-or-negative";
+export * from "./sort";
 export * from "./types";
@@ -5,0 +6,0 @@ export function makeConfig(scale, transform) {

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

 import { isString, isNumber } from "@chakra-ui/utils";
-import unit from "css-get-unit";
+import unit from "./get-unit";
 
@@ -4,0 +4,0 @@ var startsWith = (string, target) => string.slice(0, 0 + target.length) === target;

dist/types/config/background.d.ts

@@ -1,2 +0,1 @@
-/// <reference path="../@styled-system/core.d.ts" />
 import * as CSS from "csstype";
@@ -10,2 +9,10 @@ import { ResponsiveValue, Length } from "../utils";
     /**
+     * The CSS `background-clip` property
+     */
+    bgClip?: ResponsiveValue<CSS.Property.BackgroundClip | "text">;
+    /**
+     * The CSS `background-clip` property
+     */
+    backgroundClip?: ResponsiveValue<CSS.Property.BackgroundClip | "text">;
+    /**
      * The CSS `background` property
@@ -27,2 +34,6 @@ */
     /**
+     * The background-gradient shorthand
+     */
+    bgGradient?: ResponsiveValue<CSS.Property.BackgroundImage>;
+    /**
      * The CSS `background-blend-mode` property
@@ -80,3 +91,8 @@ */
 }
-export declare const background: import("@styled-system/core").StyleFn;
-export declare const backgroundParser: import("@styled-system/core").StyleFn;
+export declare const background: import("../core").Parser;
+export declare const backgroundParser: {
+    (props: Record<string, any>): Record<string, any>;
+    config: import("../core").PropConfig;
+    propNames: string[];
+    cache: Map<string, any>;
+};

dist/types/config/border.d.ts

@@ -1,2 +0,1 @@
-/// <reference path="../@styled-system/core.d.ts" />
 import * as CSS from "csstype";
@@ -101,2 +100,3 @@ import { Length, ResponsiveValue } from "../utils";
     borderRight?: ResponsiveValue<CSS.Property.BorderRight<Length>>;
+    borderEnd?: ResponsiveValue<CSS.Property.BorderInlineStart<Length>>;
     borderInlineEnd?: ResponsiveValue<CSS.Property.BorderInlineEnd<Length>>;
@@ -112,2 +112,3 @@ /**
     borderLeft?: ResponsiveValue<CSS.Property.BorderLeft<Length>>;
+    borderStart?: ResponsiveValue<CSS.Property.BorderInlineStart<Length>>;
     borderInlineStart?: ResponsiveValue<CSS.Property.BorderInlineStart<Length>>;
@@ -180,2 +181,3 @@ /**
     borderTopLeftRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    borderTopStartRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     borderStartStartRadius?: ResponsiveValue<CSS.Property.BorderStartStartRadius<Length>>;
@@ -191,2 +193,3 @@ /**
     borderTopRightRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    borderTopEndRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     borderStartEndRadius?: ResponsiveValue<CSS.Property.BorderStartEndRadius<Length>>;
@@ -202,2 +205,3 @@ /**
     borderBottomLeftRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    borderBottomStartRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     borderEndStartRadius?: ResponsiveValue<CSS.Property.BorderEndStartRadius<Length>>;
@@ -213,2 +217,3 @@ /**
     borderBottomRightRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
+    borderBottomEndRadius?: ResponsiveValue<CSS.Property.BorderRadius<Length>>;
     borderEndEndRadius?: ResponsiveValue<CSS.Property.BorderEndEndRadius<Length>>;
@@ -231,3 +236,8 @@ /**
 }
-export declare const border: import("@styled-system/core").StyleFn;
-export declare const borderParser: import("@styled-system/core").StyleFn;
+export declare const border: import("../core").Parser;
+export declare const borderParser: {
+    (props: Record<string, any>): Record<string, any>;
+    config: import("../core").PropConfig;
+    propNames: string[];
+    cache: Map<string, any>;
+};

dist/types/config/color.d.ts

@@ -1,2 +0,1 @@
-/// <reference path="../@styled-system/core.d.ts" />
 import * as CSS from "csstype";
@@ -26,3 +25,8 @@ import { ResponsiveValue } from "../utils";
 }
-export declare const color: import("@styled-system/core").StyleFn;
-export declare const colorParser: import("@styled-system/core").StyleFn;
+export declare const color: import("../core").Parser;
+export declare const colorParser: {
+    (props: Record<string, any>): Record<string, any>;
+    config: import("../core").PropConfig;
+    propNames: string[];
+    cache: Map<string, any>;
+};

dist/types/config/flexbox.d.ts

@@ -1,2 +0,1 @@
-/// <reference path="../@styled-system/core.d.ts" />
 import * as CSS from "csstype";
@@ -65,3 +64,8 @@ import { ResponsiveValue, Length } from "../utils";
 }
-export declare const flexbox: import("@styled-system/core").StyleFn;
-export declare const flexboxParser: import("@styled-system/core").StyleFn;
+export declare const flexbox: import("../core").Parser;
+export declare const flexboxParser: {
+    (props: Record<string, any>): Record<string, any>;
+    config: import("../core").PropConfig;
+    propNames: string[];
+    cache: Map<string, any>;
+};

dist/types/config/grid.d.ts

@@ -1,2 +0,1 @@
-/// <reference path="../@styled-system/core.d.ts" />
 import * as CSS from "csstype";
@@ -69,3 +68,8 @@ import { Length, ResponsiveValue } from "../utils";
 }
-export declare const grid: import("@styled-system/core").StyleFn;
-export declare const gridParser: import("@styled-system/core").StyleFn;
+export declare const grid: import("../core").Parser;
+export declare const gridParser: {
+    (props: Record<string, any>): Record<string, any>;
+    config: import("../core").PropConfig;
+    propNames: string[];
+    cache: Map<string, any>;
+};

dist/types/config/layout.d.ts

@@ -1,2 +0,1 @@
-/// <reference path="../@styled-system/core.d.ts" />
 import * as CSS from "csstype";
@@ -95,3 +94,8 @@ import { Length, ResponsiveValue } from "../utils";
 }
-export declare const layout: import("@styled-system/core").StyleFn;
-export declare const layoutParser: import("@styled-system/core").StyleFn;
+export declare const layout: import("../core").Parser;
+export declare const layoutParser: {
+    (props: Record<string, any>): Record<string, any>;
+    config: import("../core").PropConfig;
+    propNames: string[];
+    cache: Map<string, any>;
+};

dist/types/config/list.d.ts

@@ -1,2 +0,1 @@
-/// <reference path="../@styled-system/core.d.ts" />
 import * as CSS from "csstype";
@@ -23,3 +22,8 @@ import { ResponsiveValue } from "../utils";
 }
-export declare const list: import("@styled-system/core").StyleFn;
-export declare const listParser: import("@styled-system/core").StyleFn;
+export declare const list: import("../core").Parser;
+export declare const listParser: {
+    (props: Record<string, any>): Record<string, any>;
+    config: import("../core").PropConfig;
+    propNames: string[];
+    cache: Map<string, any>;
+};

dist/types/config/others.d.ts

@@ -1,3 +0,3 @@
-/// <reference path="../@styled-system/core.d.ts" />
 import * as CSS from "csstype";
+import { PropConfig } from "../core";
 import { Length, ResponsiveValue } from "../utils";
@@ -54,3 +54,8 @@ export interface OtherProps {
 }
-export declare const others: import("@styled-system/core").StyleFn;
-export declare const othersParser: import("@styled-system/core").StyleFn;
+export declare const others: import("../core").Parser;
+export declare const othersParser: {
+    (props: Record<string, any>): Record<string, any>;
+    config: PropConfig;
+    propNames: string[];
+    cache: Map<string, any>;
+};

dist/types/config/outline.d.ts

@@ -1,2 +0,1 @@
-/// <reference path="../@styled-system/core.d.ts" />
 import * as CSS from "csstype";
@@ -18,3 +17,8 @@ import { Length, ResponsiveValue } from "../utils";
 }
-export declare const outline: import("@styled-system/core").StyleFn;
-export declare const outlineParser: import("@styled-system/core").StyleFn;
+export declare const outline: import("../core").Parser;
+export declare const outlineParser: {
+    (props: Record<string, any>): Record<string, any>;
+    config: import("../core").PropConfig;
+    propNames: string[];
+    cache: Map<string, any>;
+};

dist/types/config/position.d.ts

@@ -1,2 +0,1 @@
-/// <reference path="../@styled-system/core.d.ts" />
 import * as CSS from "csstype";
@@ -69,3 +68,8 @@ import { Length, ResponsiveValue } from "../utils";
 }
-export declare const position: import("@styled-system/core").StyleFn;
-export declare const positionParser: import("@styled-system/core").StyleFn;
+export declare const position: import("../core").Parser;
+export declare const positionParser: {
+    (props: Record<string, any>): Record<string, any>;
+    config: import("../core").PropConfig;
+    propNames: string[];
+    cache: Map<string, any>;
+};

dist/types/config/shadow.d.ts

@@ -1,2 +0,1 @@
-/// <reference path="../@styled-system/core.d.ts" />
 import * as CSS from "csstype";
@@ -21,3 +20,8 @@ import { ResponsiveValue } from "../utils";
 }
-export declare const shadow: import("@styled-system/core").StyleFn;
-export declare const shadowParser: import("@styled-system/core").StyleFn;
+export declare const shadow: import("../core").Parser;
+export declare const shadowParser: {
+    (props: Record<string, any>): Record<string, any>;
+    config: import("../core").PropConfig;
+    propNames: string[];
+    cache: Map<string, any>;
+};

dist/types/config/space.d.ts

@@ -1,2 +0,1 @@
-/// <reference path="../@styled-system/core.d.ts" />
 import * as CSS from "csstype";
@@ -198,3 +197,10 @@ import { Length, ResponsiveValue } from "../utils";
  */
-export declare const space: import("@styled-system/core").StyleFn;
-export declare const spaceParser: import("@styled-system/core").StyleFn;
+export declare const space: import("../core").Parser;
+export declare const spaceParser: {
+    (props: Record<string, any>): Record<string, any>;
+    config: import("../core").PropConfig;
+    propNames: string[];
+    cache: Map<string, any>; /**
+     * Margin on top, left, bottom and right
+     */
+};

dist/types/config/transform.d.ts

@@ -1,2 +0,1 @@
-/// <reference path="../@styled-system/core.d.ts" />
 import * as CSS from "csstype";
@@ -14,3 +13,8 @@ import { Length, ResponsiveValue } from "../utils";
 }
-export declare const transform: import("@styled-system/core").StyleFn;
-export declare const transformParser: import("@styled-system/core").StyleFn;
+export declare const transform: import("../core").Parser;
+export declare const transformParser: {
+    (props: Record<string, any>): Record<string, any>;
+    config: import("../core").PropConfig;
+    propNames: string[];
+    cache: Map<string, any>;
+};

dist/types/config/transition.d.ts

@@ -1,2 +0,1 @@
-/// <reference path="../@styled-system/core.d.ts" />
 import * as CSS from "csstype";
@@ -22,3 +21,8 @@ import { ResponsiveValue } from "../utils";
 }
-export declare const transition: import("@styled-system/core").StyleFn;
-export declare const transitionParser: import("@styled-system/core").StyleFn;
+export declare const transition: import("../core").Parser;
+export declare const transitionParser: {
+    (props: Record<string, any>): Record<string, any>;
+    config: import("../core").PropConfig;
+    propNames: string[];
+    cache: Map<string, any>;
+};

dist/types/config/typography.d.ts

@@ -1,2 +0,1 @@
-/// <reference path="../@styled-system/core.d.ts" />
 import * as CSS from "csstype";
@@ -65,3 +64,8 @@ import { ResponsiveValue, Length } from "../utils";
 }
-export declare const typography: import("@styled-system/core").StyleFn;
-export declare const typographyParser: import("@styled-system/core").StyleFn;
+export declare const typography: import("../core").Parser;
+export declare const typographyParser: {
+    (props: Record<string, any>): Record<string, any>;
+    config: import("../core").PropConfig;
+    propNames: string[];
+    cache: Map<string, any>;
+};

dist/types/index.d.ts

 export * from "./config";
-export { createParser, compose } from "@styled-system/core";
+export { createParser, compose, system } from "./core";
 export * from "./pseudo";
@@ -4,0 +4,0 @@ export * from "./css";

dist/types/parser.d.ts

@@ -1,2 +0,1 @@
-/// <reference path="@styled-system/core.d.ts" />
-export declare const parser: import("@styled-system/core").StyleFn;
+export declare const parser: import("./core").Parser;

dist/types/system.d.ts

@@ -1,4 +0,3 @@
-/// <reference path="@styled-system/core.d.ts" />
-export declare const systemProps: import("@styled-system/core").StyleFn;
-export declare const layoutPropNames: string[] | undefined;
+export declare const systemProps: import("./core").Parser;
+export declare const layoutPropNames: string[];
 export declare const propNames: string[];

package.json

 {
   "name": "@chakra-ui/styled-system",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Style function for css-in-js building component libraries",
@@ -58,12 +58,5 @@ "keywords": [
     "@chakra-ui/utils": "1.0.2",
-    "@styled-system/core": "5.1.2",
     "css-get-unit": "1.0.1",
     "csstype": "3.0.3"
-  },
-  "peerDependencies": {
-    "react": "16.x || 17.x"
-  },
-  "devDependencies": {
-    "react": "^17.0.1"
   }
 }

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

637969

increased by14.56%

Dependency count

3

decreased by-40%

Dev dependency count

0

decreased by-100%

Number of package files

198

increased by21.47%

Lines of code

5297

increased by17.71%

Dependency changes

• - Removed@styled-system/core@5.1.2

• - Removed@styled-system/core@5.1.2(transitive)