allow pseudos to receive multiple styles (#410)

* add fix conflicts

* remove console.log

Author: AlexNti

src/components/tableV2/core/base-table.js

@@ -84,22 +84,22 @@ Table.Resizer = ({ onMouseDown, onTouchStart, deltaOffset, getIsResizing }) => {
     <Box
       _hover={{ background: "resizerLine", color: "resizerLine" }}
       _active={{ background: "resizerLine", color: "resizerLine" }}
+      _before={{
+        content: '":"',
+        position: "absolute",
+        top: "0",
+        bottom: "0",
+        display: "flex",
+        alignItems: "center",
+        left: "-8px",
+        width: "8px",
+      }}
       sx={{
         width: "2px",
         userSelect: "none",
         touchAction: "none",
         cursor: "col-resize",
         color: "border",
-        "&::before": {
-          content: '":"',
-          position: "absolute",
-          top: "0",
-          bottom: "0",
-          display: "flex",
-          alignItems: "center",
-          left: "-8px",
-          width: "8px",
-        },
         ...resizingProps,
       }}
       onMouseDown={onMouseDown}

src/components/templates/mixins/pseudos.js

@@ -2,23 +2,42 @@ import background from "src/components/templates/mixins/background"
 import borderMixIn from "src/components/templates/mixins/border"
 import shadow from "src/components/templates/mixins/shadow"
 import { getColor } from "src/theme"
-
-const clearEmptyLines = str => str.replace(/^(?=\n)$|^\s*|\s*$|\n\n+/gm, "")
+import alignItems from "src/components/templates/mixins/alignItems"
 
 const fontColor = ({ theme, color }) => {
   if (!color) return ""
+
   return `color: ${getColor(color)({ theme })};`
 }
 
-export const callAllFunctionsAndMergeResults = (...fns) => {
+const clearEmptyLines = str => str.replace(/^(?=\n)$|^\s*|\s*$|\n\n+/gm, "")
+
+const transforms = {
+  boxShadow: shadow,
+  border: borderMixIn,
+  background: background,
+  color: fontColor,
+  alignItems: alignItems,
+}
+
+export const calculateStyles = ({ theme, ...styles }) => {
   let result = ""
-  return function mergedFn(arg) {
-    fns.forEach(fn => {
-      const functionResult = fn && typeof fn === "function" ? fn(arg) : ""
-      result = result + functionResult
-    })
-    return result
+
+  for (const key in styles) {
+    if (transforms[key] !== undefined) {
+      const transformFuction = transforms[key]
+      const transformFuctionResult =
+        transformFuction && typeof transformFuction === "function"
+          ? transformFuction({ theme, ...styles })
+          : ""
+      result = result + transformFuctionResult
+      continue
+    }
+    const value = styles[key]
+    result = result + `${key}:${value};`
   }
+
+  return result
 }
 
 export const pseudoSelectors = {
@@ -56,12 +75,7 @@ export default ({ theme, ...props }) => {
     if (prop in pseudoSelectors) {
       const pseudoProp = prop
       const pseudoStyles = props[pseudoProp]
-      const styles = callAllFunctionsAndMergeResults(
-        shadow,
-        borderMixIn,
-        background,
-        fontColor
-      )({ theme, ...pseudoStyles })
+      const styles = calculateStyles({ theme, ...pseudoStyles })
 
       pseudo =
         pseudo +

src/components/templates/mixins/pseudos.test.js

@@ -31,8 +31,8 @@ it("render border and box shadow (hover)", () => {
   const size = "0 0 0 1px"
 
   const _hover = {
-    border: { color: "disabled", side: "top", size: "1rem", type: "dashed" },
     boxShadow: { size, color: "disabled" },
+    border: { color: "disabled", side: "top", size: "1rem", type: "dashed" },
   }
   const pseudo = `
 ${pseudoSelectors["_hover"]}{
@@ -47,12 +47,12 @@ it("render border and box shadow with multiple selectors (hover,active)", () =>
   const size = "0 0 0 1px"
 
   const _hover = {
-    border: { color: "disabled", side: "top", size: "1rem", type: "dashed" },
     boxShadow: { size, color: "disabled" },
+    border: { color: "disabled", side: "top", size: "1rem", type: "dashed" },
   }
   const _active = {
-    border: { color: "disabled", side: "top", size: "1rem", type: "dashed" },
     boxShadow: { size, color: "disabled" },
+    border: { color: "disabled", side: "top", size: "1rem", type: "dashed" },
   }
   const pseudo = `
 ${pseudoSelectors["_hover"]}{