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

Comparing version 1.6.0 to 1.7.0

CHANGELOG.md

 # Change Log
 
+## 1.7.0
+
+### Minor Changes
+
+- [`a97e42568`](https://github.com/chakra-ui/chakra-ui/commit/a97e42568c4470d6cd1e16b48429af93c52def49)
+  [#3290](https://github.com/chakra-ui/chakra-ui/pull/3290) Thanks
+  [@TimKolberger](https://github.com/TimKolberger)! - Theme Typings: Add
+  autocomplete for negative space values
+
+* [`ff4a36bca`](https://github.com/chakra-ui/chakra-ui/commit/ff4a36bca11cc177830f6f1da13700acd1e3a087)
+  [#3245](https://github.com/chakra-ui/chakra-ui/pull/3245) Thanks
+  [@segunadebayo](https://github.com/segunadebayo)! - - Add support for
+  `textStyle` and `layerStyle` in styled-system package. This makes it possible
+  to use them in the component theme, `css` function, and `sx` prop as well.
+
+  ```jsx
+  const theme = {
+    textStyles: {
+      caps: {
+        fontWeight: "bold",
+        fontSize: "24px",
+      },
+    },
+  }
+
+  const styles = css({ textStyle: "caps" })(theme)
+  ```
+
+  This also works for component theme as well.
+
+  > `layerStyle`, `textStyle` and `apply` can now take responsive values as
+  > well.
+
+  - Refactored `apply` prop handling to use the style config pattern instead of
+    add it imperatively.
+
+### Patch Changes
+
+- [`ef34c10a0`](https://github.com/chakra-ui/chakra-ui/commit/ef34c10a0c3cfda6bafcca4aa287dfb82f130aeb)
+  [#3253](https://github.com/chakra-ui/chakra-ui/pull/3253) Thanks
+  [@TimKolberger](https://github.com/TimKolberger)! - Allow numbers for
+  `borderTop` and provide autocomplete for `fontWeight` prop
+
+* [`408aaaace`](https://github.com/chakra-ui/chakra-ui/commit/408aaaace0dd413b61354958a4c30b9f2f8aa376)
+  [#3227](https://github.com/chakra-ui/chakra-ui/pull/3227) Thanks
+  [@TimKolberger](https://github.com/TimKolberger)! - Introducing a generic
+  TypeScript type `ChakraTheme` to improve the `extendTheme` function even
+  further.
+
+  ```ts
+  import { extendTheme } from "@chakra-ui/react"
+
+  export const customTheme = extendTheme({
+    // here you get autocomplete for
+    //   - existing definitions from the default theme
+    //   - new components (Single and MultiStyle)
+    //   - CSS definitions
+    //   - color hues
+    //   - etc.
+  })
+
+  export type MyCustomTheme = typeof customTheme
+  ```
+
+  You can get typesafe access to your custom theme like this:
+
+  ```ts
+  import { useTheme } from "@chakra-ui/react"
+  import { MyCustomTheme } from "./my-custom-theme"
+
+  const MyComponent = () => {
+    const customTheme = useTheme<MyCustomTheme>()
+    //...
+  }
+  ```
+
+- [`61962345c`](https://github.com/chakra-ui/chakra-ui/commit/61962345c5b1c862445c16c586e304b28c376c9a)
+  [#3291](https://github.com/chakra-ui/chakra-ui/pull/3291) Thanks
+  [@dominictwlee](https://github.com/dominictwlee)! - Support negative scale
+  values for css variables.
+
+- Updated dependencies
+  [[`ff4a36bca`](https://github.com/chakra-ui/chakra-ui/commit/ff4a36bca11cc177830f6f1da13700acd1e3a087),
+  [`483687237`](https://github.com/chakra-ui/chakra-ui/commit/483687237f2c4fed05dc6a79693f307c601c1285),
+  [`61962345c`](https://github.com/chakra-ui/chakra-ui/commit/61962345c5b1c862445c16c586e304b28c376c9a)]:
+  - @chakra-ui/utils@1.2.0
+
 ## 1.6.0
@@ -4,0 +91,0 @@

dist/cjs/config/others.js

@@ -6,2 +6,4 @@ "use strict";
 
+var _utils = require("@chakra-ui/utils");
+
 var _core = require("../core");
@@ -68,2 +70,23 @@
     }
+  },
+  layerStyle: {
+    processResult: true,
+    property: "&",
+    transform: function transform(value, _, theme) {
+      return (0, _utils.memoizedGet)(theme, "layerStyles." + value, {});
+    }
+  },
+  textStyle: {
+    processResult: true,
+    property: "&",
+    transform: function transform(value, _, theme) {
+      return (0, _utils.memoizedGet)(theme, "textStyles." + value, {});
+    }
+  },
+  apply: {
+    processResult: true,
+    property: "&",
+    transform: function transform(value, _, theme) {
+      return (0, _utils.memoizedGet)(theme, value, {});
+    }
   }
@@ -70,0 +93,0 @@ };

dist/cjs/css.js

@@ -133,3 +133,3 @@ "use strict";
     for (var k in styles) {
-      var _config, _config$transform, _config2, _config3, _config4;
+      var _config, _config$transform, _config2, _config3, _config4, _config5;
 
@@ -149,8 +149,2 @@ var x = styles[k];
 
-      if (key === "apply") {
-        var apply = css((0, _utils.memoizedGet)(theme, val))(theme);
-        computedStyles = (0, _utils.mergeWith)({}, computedStyles, apply);
-        continue;
-      }
-
       if ((0, _utils.isObject)(val)) {
@@ -163,4 +157,10 @@ computedStyles[key] = css(val)(theme);
       var value = (_config$transform = (_config2 = config) == null ? void 0 : _config2.transform == null ? void 0 : _config2.transform(val, scale, props)) != null ? _config$transform : (0, _utils.memoizedGet)(scale, val, val);
+      /**
+       * Useful for `layerStyle`, and `textStyle` to transform the returned
+       * result since it might use theme tokens
+       */
 
-      if ((_config3 = config) != null && _config3.properties) {
+      value = (_config3 = config) != null && _config3.processResult ? css(value)(theme) : value;
+
+      if ((_config4 = config) != null && _config4.properties) {
         for (var _iterator = _createForOfIteratorHelperLoose(config.properties), _step; !(_step = _iterator()).done;) {
@@ -174,3 +174,3 @@ var property = _step.value;
 
-      if ((_config4 = config) != null && _config4.property) {
+      if ((_config5 = config) != null && _config5.property) {
         /**
@@ -177,0 +177,0 @@ * Used for styled-system configs that map to multiple computed properties.

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

@@ -25,3 +25,3 @@ "use strict";
     if ((0, _utils.isString)(raw)) {
-      result = "-" + raw;
+      result = (0, _utils.isCssVar)(raw) ? "calc(" + raw + " * -1)" : "-" + raw;
     } else if ((0, _utils.isNumber)(raw)) {
@@ -28,0 +28,0 @@ result = raw * -1;

dist/esm/config/others.js

@@ -0,1 +1,2 @@
+import { memoizedGet as get } from "@chakra-ui/utils";
 import { createParser, system } from "../core";
@@ -63,2 +64,17 @@ import { getIsRtl } from "../utils/directionality";
 
+  },
+  layerStyle: {
+    processResult: true,
+    property: "&",
+    transform: (value, _, theme) => get(theme, "layerStyles." + value, {})
+  },
+  textStyle: {
+    processResult: true,
+    property: "&",
+    transform: (value, _, theme) => get(theme, "textStyles." + value, {})
+  },
+  apply: {
+    processResult: true,
+    property: "&",
+    transform: (value, _, theme) => get(theme, value, {})
   }
@@ -65,0 +81,0 @@ };

dist/esm/css.js

@@ -111,3 +111,3 @@ import { isArray, isCustomBreakpoint, isObject, isResponsiveObjectLike, memoizedGet as get, mergeWith, objectToArrayNotation, runIfFn } from "@chakra-ui/utils";
     for (var k in styles) {
-      var _config, _config$transform, _config2, _config3, _config4;
+      var _config, _config$transform, _config2, _config3, _config4, _config5;
 
@@ -127,8 +127,2 @@ var x = styles[k];
 
-      if (key === "apply") {
-        var apply = css(get(theme, val))(theme);
-        computedStyles = mergeWith({}, computedStyles, apply);
-        continue;
-      }
-
       if (isObject(val)) {
@@ -141,4 +135,10 @@ computedStyles[key] = css(val)(theme);
       var value = (_config$transform = (_config2 = config) == null ? void 0 : _config2.transform == null ? void 0 : _config2.transform(val, scale, props)) != null ? _config$transform : get(scale, val, val);
+      /**
+       * Useful for `layerStyle`, and `textStyle` to transform the returned
+       * result since it might use theme tokens
+       */
 
-      if ((_config3 = config) != null && _config3.properties) {
+      value = (_config3 = config) != null && _config3.processResult ? css(value)(theme) : value;
+
+      if ((_config4 = config) != null && _config4.properties) {
         for (var property of config.properties) {
@@ -151,3 +151,3 @@ computedStyles[property] = value;
 
-      if ((_config4 = config) != null && _config4.property) {
+      if ((_config5 = config) != null && _config5.property) {
         /**
@@ -154,0 +154,0 @@ * Used for styled-system configs that map to multiple computed properties.

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

@@ -1,2 +0,2 @@
-import { isString, isNumber } from "@chakra-ui/utils";
+import { isString, isNumber, isCssVar } from "@chakra-ui/utils";
 import unit from "./get-unit";
@@ -15,3 +15,3 @@
     if (isString(raw)) {
-      result = "-" + raw;
+      result = isCssVar(raw) ? "calc(" + raw + " * -1)" : "-" + raw;
     } else if (isNumber(raw)) {
@@ -18,0 +18,0 @@ result = raw * -1;

dist/types/config/border.d.ts

@@ -34,3 +34,3 @@ import * as CSS from "csstype";
      */
-    borderTop?: Token<CSS.Property.BorderTop, "borders">;
+    borderTop?: Token<CSS.Property.BorderTop | number, "borders">;
     borderBlockStart?: Token<CSS.Property.BorderBlockStart | number>;
@@ -37,0 +37,0 @@ /**

dist/types/config/others.d.ts

@@ -66,2 +66,16 @@ import * as CSS from "csstype";
     clipPath?: ResponsiveValue<CSS.Property.ClipPath>;
+    /**
+     * The layer style object to apply.
+     * Note: Styles must be located in `theme.layerStyles`
+     */
+    layerStyle?: ResponsiveValue<string>;
+    /**
+     * The text style object to apply.
+     * Note: Styles must be located in `theme.textStyles`
+     */
+    textStyle?: ResponsiveValue<string>;
+    /**
+     * Apply theme-aware style objects in `theme`
+     */
+    apply?: ResponsiveValue<string>;
 }
@@ -68,0 +82,0 @@ export declare const others: import("../core").Parser;

dist/types/config/typography.d.ts

@@ -10,3 +10,3 @@ import * as CSS from "csstype";
      */
-    fontWeight?: Token<string, "fontWeights">;
+    fontWeight?: Token<number | (string & {}), "fontWeights">;
     /**
@@ -13,0 +13,0 @@ * The CSS `line-height` property

dist/types/core/types.d.ts

@@ -29,2 +29,3 @@ import { Dict } from "@chakra-ui/utils";
     transform?(value: any, scale: any, props: Props): any;
+    processResult?: boolean;
 }
@@ -31,0 +32,0 @@ export interface Config {

dist/types/theming.types.d.ts

@@ -300,31 +300,61 @@ // regenerate by running
     | "0"
+    | "-0"
     | "1"
+    | "-1"
     | "2"
+    | "-2"
     | "3"
+    | "-3"
     | "4"
+    | "-4"
     | "5"
+    | "-5"
     | "6"
+    | "-6"
     | "7"
+    | "-7"
     | "8"
+    | "-8"
     | "9"
+    | "-9"
     | "10"
+    | "-10"
     | "12"
+    | "-12"
     | "14"
+    | "-14"
     | "16"
+    | "-16"
     | "20"
+    | "-20"
     | "24"
+    | "-24"
     | "28"
+    | "-28"
     | "32"
+    | "-32"
     | "36"
+    | "-36"
     | "40"
+    | "-40"
     | "44"
+    | "-44"
     | "48"
+    | "-48"
     | "52"
+    | "-52"
     | "56"
+    | "-56"
     | "60"
+    | "-60"
     | "64"
+    | "-64"
     | "72"
+    | "-72"
     | "80"
+    | "-80"
     | "96"
+    | "-96"
     | "px"
+    | "-px"
   textStyles: never
@@ -331,0 +361,0 @@ transition: never

dist/types/types.d.ts

@@ -8,11 +8,5 @@ import { Dict } from "@chakra-ui/utils";
 }
-export interface ApplyPropStyles {
-    /**
-     * Apply theme-aware style objects in `theme`
-     */
-    apply?: ResponsiveValue<string>;
+export interface SystemCSSProperties extends CSS.Properties, Omit<StyleProps, keyof CSS.Properties> {
 }
-export interface SystemCSSProperties extends CSS.Properties, Omit<StyleProps, keyof CSS.Properties>, ApplyPropStyles {
-}
-declare type ThemeThunk<T> = T | ((theme: Dict) => T);
+export declare type ThemeThunk<T> = T | ((theme: Dict) => T);
 declare type PropertyValue<K extends keyof SystemCSSProperties> = ThemeThunk<ResponsiveValue<boolean | number | string | SystemCSSProperties[K]>>;
@@ -19,0 +13,0 @@ export declare type CSSWithMultiValues = {

package.json

 {
   "name": "@chakra-ui/styled-system",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Style function for css-in-js building component libraries",
@@ -57,3 +57,3 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/utils": "1.1.0",
+    "@chakra-ui/utils": "1.2.0",
     "css-get-unit": "1.0.1",
@@ -60,0 +60,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

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

736688

increased by1.15%

Lines of code

6402

increased by1.22%

Dependency changes

• + Added@chakra-ui/utils@1.2.0(transitive)

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

• - Removedobject-assign@4.1.1(transitive)

• Updated@chakra-ui/utils@1.2.0