revert: chakra-ui#6335

.changeset/fresh-elephants-cover.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/styled-system": patch
+---
+
+Revert #6335

packages/components/styled-system/package.json

@@ -45,16 +45,14 @@
     "@chakra-ui/shared-utils": "workspace:*",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@types/lodash.mergewith": "4.6.6",
-    "cronometro": "^1.1.0"
+    "@types/lodash.mergewith": "4.6.6"
   },
   "sideEffects": false,
   "scripts": {
     "build": "tsup --entry src/index.ts --entry src/theming.types.ts --entry src/shared.types.ts --dts",
     "dev": "pnpm build -- --watch",
     "clean": "rimraf dist .turbo",
     "typecheck": "tsc --noEmit",
-    "build:fast": "tsup src/index.ts",
-    "benchmark": "node benchmarks/benchmark.js"
+    "build:fast": "tsup src/index.ts"
   }
 }

packages/components/styled-system/src/css.ts

@@ -1,9 +1,11 @@
 import { isObject, runIfFn } from "@chakra-ui/shared-utils"
 import * as CSS from "csstype"
+import mergeWith from "lodash.mergewith"
 import { pseudoSelectors } from "./pseudos"
 import { systemProps as systemPropConfigs } from "./system"
 import { StyleObjectOrFn } from "./system.types"
-import { Config } from "./utils/prop-config"
+import { expandResponsive } from "./utils/expand-responsive"
+import { Config, PropConfig } from "./utils/prop-config"
 import { splitByComma } from "./utils/split-by-comma"
 import { CssTheme } from "./utils/types"
 
@@ -35,58 +37,20 @@ interface GetCSSOptions {
 export function getCss(options: GetCSSOptions) {
   const { configs = {}, pseudos = {}, theme } = options
 
-  /**
-   * Before any style can be processed, the user needs to call `toCSSVar`
-   * which analyzes the theme's breakpoint and appends a `__breakpoints` property
-   * to the theme with more details of the breakpoints.
-   *
-   * To learn more, go here: packages/utils/src/breakpoint.ts #analyzeBreakpoints
-   */
-  if (!theme.__breakpoints) return () => ({})
-  const { isResponsive, toArrayValue, media: medias } = theme.__breakpoints
-
   const css = (stylesOrFn: Record<string, any>, nested = false) => {
-    const styles = runIfFn(stylesOrFn, theme)
+    const _styles = runIfFn(stylesOrFn, theme)
+    const styles = expandResponsive(_styles)(theme)
 
     let computedStyles: Record<string, any> = {}
 
     for (let key in styles) {
+      const valueOrFn = styles[key]
+
       /**
        * allows the user to pass functional values
        * boxShadow: theme => `0 2px 2px ${theme.colors.red}`
        */
-      let value = runIfFn(styles[key], theme)
-      if (value == null) continue
-
-      if (Array.isArray(value) || (isObject(value) && isResponsive(value))) {
-        let values = Array.isArray(value) ? value : toArrayValue(value)
-        values = values.slice(0, medias.length)
-
-        for (let index = 0; index < values.length; index++) {
-          const media = medias[index]
-          const val = values[index]
-
-          if (media) {
-            if (val == null) {
-              computedStyles[media] ??= {}
-            } else {
-              computedStyles[media] = Object.assign(
-                {},
-                computedStyles[media],
-                css({ [key]: val }, true),
-              )
-            }
-          } else {
-            computedStyles = Object.assign(
-              {},
-              computedStyles,
-              css({ ...styles, [key]: val }, false),
-            )
-          }
-        }
-
-        continue
-      }
+      let value = runIfFn(valueOrFn, theme)
 
       /**
        * converts pseudo shorthands to valid selector
@@ -107,25 +71,21 @@ export function getCss(options: GetCSSOptions) {
         value = resolveTokenValue(theme, value)
       }
 
+      let config = configs[key]
+
+      if (config === true) {
+        config = { property: key } as PropConfig
+      }
       if (isObject(value)) {
-        computedStyles[key] = Object.assign(
+        computedStyles[key] = computedStyles[key] ?? {}
+        computedStyles[key] = mergeWith(
           {},
           computedStyles[key],
           css(value, true),
         )
-        continue
-      }
-
-      let config = configs[key]
-      if (config === true) {
-        config = { property: key }
-      }
-      if (!nested && config?.static) {
-        const staticStyles = runIfFn(config.static, theme)
-        computedStyles = Object.assign({}, computedStyles, staticStyles)
       }
 
-      let rawValue = config?.transform?.(value, theme, styles) ?? value
+      let rawValue = config?.transform?.(value, theme, _styles) ?? value
 
       /**
        * Used for `layerStyle`, `textStyle` and `apply`. After getting the
@@ -136,11 +96,6 @@ export function getCss(options: GetCSSOptions) {
        */
       rawValue = config?.processResult ? css(rawValue, true) : rawValue
 
-      if (isObject(rawValue)) {
-        computedStyles = Object.assign({}, computedStyles, rawValue)
-        continue
-      }
-
       /**
        * allows us to define css properties for RTL and LTR.
        *
@@ -149,22 +104,33 @@ export function getCss(options: GetCSSOptions) {
        * }
        */
       const configProperty = runIfFn(config?.property, theme)
-      if (configProperty) {
-        if (Array.isArray(configProperty)) {
-          for (const property of configProperty) {
-            computedStyles[property] = rawValue
-          }
-          continue
+
+      if (!nested && config?.static) {
+        const staticStyles = runIfFn(config.static, theme)
+        computedStyles = mergeWith({}, computedStyles, staticStyles)
+      }
+
+      if (configProperty && Array.isArray(configProperty)) {
+        for (const property of configProperty) {
+          computedStyles[property] = rawValue
         }
+        continue
+      }
 
+      if (configProperty) {
         if (configProperty === "&" && isObject(rawValue)) {
-          computedStyles = Object.assign({}, computedStyles, rawValue)
+          computedStyles = mergeWith({}, computedStyles, rawValue)
         } else {
-          computedStyles[configProperty] = rawValue
+          computedStyles[configProperty as string] = rawValue
         }
         continue
       }
 
+      if (isObject(rawValue)) {
+        computedStyles = mergeWith({}, computedStyles, rawValue)
+        continue
+      }
+
       computedStyles[key] = rawValue
     }
 
@@ -174,7 +140,7 @@ export function getCss(options: GetCSSOptions) {
   return css
 }
 
-export const css = (styles: StyleObjectOrFn) => (theme: CssTheme) => {
+export const css = (styles: StyleObjectOrFn) => (theme: any) => {
   const cssFn = getCss({
     theme,
     pseudos: pseudoSelectors,

packages/components/styled-system/src/utils/expand-responsive.ts

@@ -0,0 +1,62 @@
+import { isObject, runIfFn } from "@chakra-ui/shared-utils"
+
+/**
+ * Expands an array or object syntax responsive style.
+ *
+ * @example
+ * expandResponsive({ mx: [1, 2] })
+ * // or
+ * expandResponsive({ mx: { base: 1, sm: 2 } })
+ *
+ * // => { mx: 1, "@media(min-width:<sm>)": { mx: 2 } }
+ */
+export const expandResponsive =
+  (styles: Record<string, any>) => (theme: Record<string, any>) => {
+    /**
+     * Before any style can be processed, the user needs to call `toCSSVar`
+     * which analyzes the theme's breakpoint and appends a `__breakpoints` property
+     * to the theme with more details of the breakpoints.
+     *
+     * To learn more, go here: packages/utils/src/responsive.ts #analyzeBreakpoints
+     */
+    if (!theme.__breakpoints) return styles
+    const { isResponsive, toArrayValue, media: medias } = theme.__breakpoints
+
+    const computedStyles: Record<string, any> = {}
+
+    for (const key in styles) {
+      let value = runIfFn(styles[key], theme)
+
+      if (value == null) continue
+
+      // converts the object responsive syntax to array syntax
+      value =
+        isObject(value) && isResponsive(value) ? toArrayValue(value) : value
+
+      if (!Array.isArray(value)) {
+        computedStyles[key] = value
+        continue
+      }
+
+      const queries = value.slice(0, medias.length).length
+
+      for (let index = 0; index < queries; index += 1) {
+        const media = medias?.[index]
+
+        if (!media) {
+          computedStyles[key] = value[index]
+          continue
+        }
+
+        computedStyles[media] = computedStyles[media] || {}
+
+        if (value[index] == null) {
+          continue
+        }
+
+        computedStyles[media][key] = value[index]
+      }
+    }
+
+    return computedStyles
+  }

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

@@ -513,14 +513,15 @@ test("returns correct media query 2nd order", () => {
   expect(keys).toMatchInlineSnapshot(`
     Array [
       "flexDirection",
+      "justifyContent",
+      "@media screen and (min-width: 40em)",
+      "@media screen and (min-width: 52em)",
       "color",
       "height",
       "paddingInlineStart",
       "paddingInlineEnd",
       "paddingTop",
-      "paddingBottom",
-      "@media screen and (min-width: 40em)",
-      "@media screen and (min-width: 52em)",
+      "paddingBottom"
     ]
   `)
 })