fix: correct hueRotate and backdropHueRotate functions (#8057)

fix(styled-system): correct hueRotate and backdropHueRotate functions

.changeset/hungry-camels-dream.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/styled-system": patch
+---
+
+Fixed a bug where `hueRotate` and `backdropHueRotate` were not working.

packages/core/styled-system/src/config/filter.ts

@@ -7,7 +7,7 @@ export const filter: Config = {
   blur: t.blur("--chakra-blur"),
   brightness: t.propT("--chakra-brightness", transforms.brightness),
   contrast: t.propT("--chakra-contrast", transforms.contrast),
-  hueRotate: t.degreeT("--chakra-hue-rotate"),
+  hueRotate: t.propT("--chakra-hue-rotate", transforms.hueRotate),
   invert: t.propT("--chakra-invert", transforms.invert),
   saturate: t.propT("--chakra-saturate", transforms.saturate),
   dropShadow: t.propT("--chakra-drop-shadow", transforms.dropShadow),
@@ -18,7 +18,10 @@ export const filter: Config = {
     transforms.brightness,
   ),
   backdropContrast: t.propT("--chakra-backdrop-contrast", transforms.contrast),
-  backdropHueRotate: t.degreeT("--chakra-backdrop-hue-rotate"),
+  backdropHueRotate: t.propT(
+    "--chakra-backdrop-hue-rotate",
+    transforms.hueRotate,
+  ),
   backdropInvert: t.propT("--chakra-backdrop-invert", transforms.invert),
   backdropSaturate: t.propT("--chakra-backdrop-saturate", transforms.saturate),
 }

packages/core/styled-system/src/utils/transform-functions.ts

@@ -67,7 +67,8 @@ export const transformFunctions = {
   contrast: wrap("contrast"),
   dropShadow: wrap("drop-shadow"),
   grayscale: wrap("grayscale"),
-  hueRotate: wrap("hue-rotate"),
+  hueRotate: (value: any) =>
+    wrap("hue-rotate")(transformFunctions.degree(value)),
   invert: wrap("invert"),
   saturate: wrap("saturate"),
   sepia: wrap("sepia"),

packages/core/styled-system/tests/css.test.ts

@@ -677,3 +677,47 @@ test("should resolve !important syntax", () => {
 //     `)
 //   })
 // })
+
+test("returns filter hueRotate css function", () => {
+  const result = css({
+    filter: "auto",
+    hueRotate: "90",
+  })(theme)
+
+  expect(result).toMatchInlineSnapshot(`
+    {
+      "--chakra-blur": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-drop-shadow": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-hue-rotate": "hue-rotate(90deg)",
+      "--chakra-invert": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-sepia": "var(--chakra-empty,/*!*/ /*!*/)",
+      "filter": "var(--chakra-blur) var(--chakra-brightness) var(--chakra-contrast) var(--chakra-grayscale) var(--chakra-hue-rotate) var(--chakra-invert) var(--chakra-saturate) var(--chakra-sepia) var(--chakra-drop-shadow)",
+    }
+  `)
+})
+
+test("returns backdropFilter backdropHueRotate css function", () => {
+  const result = css({
+    backdropFilter: "auto",
+    backdropHueRotate: "90",
+  })(theme)
+
+  expect(result).toMatchInlineSnapshot(`
+    {
+      "--chakra-backdrop-blur": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-hue-rotate": "hue-rotate(90deg)",
+      "--chakra-backdrop-invert": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-opacity": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-sepia": "var(--chakra-empty,/*!*/ /*!*/)",
+      "backdropFilter": "var(--chakra-backdrop-blur) var(--chakra-backdrop-brightness) var(--chakra-backdrop-contrast) var(--chakra-backdrop-grayscale) var(--chakra-backdrop-hue-rotate) var(--chakra-backdrop-invert) var(--chakra-backdrop-opacity) var(--chakra-backdrop-saturate) var(--chakra-backdrop-sepia)",
+    }
+  `)
+})