From cae420e0ac6fc604c1c3153f367d1f9d27c61a49 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Tue, 20 Oct 2020 03:04:45 +0400
Subject: [PATCH] chore: updates

---
 .eslintrc                                     |  2 ++
 .../tests/__snapshots__/portal.test.tsx.snap  |  2 +-
 packages/styled-system/src/css.ts             | 24 +++++++++----------
 packages/system/tests/style-resolver.test.ts  |  2 +-
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 4f2d972546c..7a8e63973b7 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -36,10 +36,12 @@
     "import/prefer-default-export": "off",
     "no-underscore-dangle": "off",
     "no-shadow": "off",
+    "guard-for-in": "off",
     "react/no-danger": "off",
     "operator-assignment": "off",
     "prefer-destructuring": "off",
     "react/state-in-constructor": "off",
+    "no-restricted-syntax": "off",
     "no-continue": "off",
     "react/destructuring-assignment": "off",
     "@typescript-eslint/dot-notation": "off",
diff --git a/packages/portal/tests/__snapshots__/portal.test.tsx.snap b/packages/portal/tests/__snapshots__/portal.test.tsx.snap
index 11c83694ef7..3e697ff11df 100644
--- a/packages/portal/tests/__snapshots__/portal.test.tsx.snap
+++ b/packages/portal/tests/__snapshots__/portal.test.tsx.snap
@@ -67,4 +67,4 @@ exports[`should render nested portal 1`] = `
 </DocumentFragment>
 `;
 
-exports[`should render portal 1`] = `"<div id=\\"chakra-toast-portal\\"><span id=\\"chakra-toast-manager-top\\" style=\\"position: fixed; z-index: 5500; pointer-events: none; margin: 0px auto; text-align: center; top: 0px; right: 0px; left: 0px;\\"></span><span id=\\"chakra-toast-manager-top-left\\" style=\\"position: fixed; z-index: 5500; pointer-events: none; top: 0px; left: 0px;\\"></span><span id=\\"chakra-toast-manager-top-right\\" style=\\"position: fixed; z-index: 5500; pointer-events: none; top: 0px; right: 0px;\\"></span><span id=\\"chakra-toast-manager-bottom-left\\" style=\\"position: fixed; z-index: 5500; pointer-events: none; bottom: 0px; left: 0px;\\"></span><span id=\\"chakra-toast-manager-bottom\\" style=\\"position: fixed; z-index: 5500; pointer-events: none; margin: 0px auto; text-align: center; bottom: 0px; right: 0px; left: 0px;\\"></span><span id=\\"chakra-toast-manager-bottom-right\\" style=\\"position: fixed; z-index: 5500; pointer-events: none; bottom: 0px; right: 0px;\\"></span></div><div><div class=\\"chakra-portal-manager\\"><div class=\\"chakra-portal\\">This is a portal</div></div></div>"`;
+exports[`should render portal 1`] = `"<div id=\\"chakra-toast-portal\\"><ul id=\\"chakra-toast-manager-top\\" style=\\"position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; margin: 0px auto; top: 0px; right: 0px; left: 0px;\\"></ul><ul id=\\"chakra-toast-manager-top-left\\" style=\\"position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; top: 0px; left: 0px;\\"></ul><ul id=\\"chakra-toast-manager-top-right\\" style=\\"position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; top: 0px; right: 0px;\\"></ul><ul id=\\"chakra-toast-manager-bottom-left\\" style=\\"position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; bottom: 0px; left: 0px;\\"></ul><ul id=\\"chakra-toast-manager-bottom\\" style=\\"position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; margin: 0px auto; bottom: 0px; right: 0px; left: 0px;\\"></ul><ul id=\\"chakra-toast-manager-bottom-right\\" style=\\"position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; bottom: 0px; right: 0px;\\"></ul></div><div><div class=\\"chakra-portal-manager\\"><div class=\\"chakra-portal\\">This is a portal</div></div></div>"`;
diff --git a/packages/styled-system/src/css.ts b/packages/styled-system/src/css.ts
index 4aade77f904..2f46946660f 100644
--- a/packages/styled-system/src/css.ts
+++ b/packages/styled-system/src/css.ts
@@ -91,11 +91,11 @@ const responsive = (styles: any) => (theme: Dict) => {
     theme.breakpoints,
   )
 
-  Object.keys(styles).forEach((key) => {
+  for (const key in styles) {
     let value = runIfFn(styles[key], theme)
 
     if (value == null) {
-      return
+      continue
     }
 
     value = isResponsiveObjectLike(value, breakpoints)
@@ -104,7 +104,7 @@ const responsive = (styles: any) => (theme: Dict) => {
 
     if (!isArray(value)) {
       computedStyles[key] = value
-      return
+      continue
     }
 
     const queries = value.slice(0, mediaQueries.length).length
@@ -125,7 +125,7 @@ const responsive = (styles: any) => (theme: Dict) => {
 
       computedStyles[media][key] = value[index]
     }
-  })
+  }
 
   return computedStyles
 }
@@ -142,7 +142,7 @@ export const css = (args: StyleObjectOrFn = {}) => (
   const styleObject = runIfFn(args, theme)
   const styles = responsive(styleObject)(theme)
 
-  Object.keys(styles).forEach((k) => {
+  for (const k in styles) {
     const x = styles[k]
     const val = runIfFn(x, theme)
 
@@ -152,31 +152,31 @@ export const css = (args: StyleObjectOrFn = {}) => (
     if (key === "apply") {
       const apply = css(get(theme, val))(theme)
       computedStyles = mergeWith({}, computedStyles, apply)
-      return
+      continue
     }
 
     if (isObject(val)) {
       computedStyles[key] = css(val)(theme)
-      return
+      continue
     }
 
     const scale = get(theme, config?.scale, {})
     const value = config?.transform?.(val, scale) ?? get(scale, val, val)
 
     if (config?.properties) {
-      config.properties.forEach((property: string) => {
+      for (const property of config.properties) {
         computedStyles[property] = value
-      })
-      return
+      }
+      continue
     }
 
     if (config?.property) {
       computedStyles[config.property] = value
-      return
+      continue
     }
 
     computedStyles[key] = value
-  })
+  }
 
   return computedStyles
 }
diff --git a/packages/system/tests/style-resolver.test.ts b/packages/system/tests/style-resolver.test.ts
index d7f07ac9db1..600a91fcf8e 100644
--- a/packages/system/tests/style-resolver.test.ts
+++ b/packages/system/tests/style-resolver.test.ts
@@ -1,5 +1,5 @@
-import { styleResolver } from "../src/system"
 import theme from "@chakra-ui/theme"
+import { styleResolver } from "../src/system"
 
 const customTheme: any = {
   ...theme,