From 12a45d8558b87fdc74209647c9d292cec31cf1ac Mon Sep 17 00:00:00 2001
From: andrew <andrew@channel.io>
Date: Tue, 12 Dec 2023 10:18:38 +0900
Subject: [PATCH] refactor(bezier-codemod): adopt border-style property so that
 transformed code is shorter

---
 .../foundation-to-css-variable-border.ts      | 43 ++++++-------------
 .../fixtures/border1.output.tsx               | 14 +++---
 2 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/packages/bezier-codemod/src/transforms/foundation-to-css-variable-border.ts b/packages/bezier-codemod/src/transforms/foundation-to-css-variable-border.ts
index 653d1e9bb9..594b488e25 100644
--- a/packages/bezier-codemod/src/transforms/foundation-to-css-variable-border.ts
+++ b/packages/bezier-codemod/src/transforms/foundation-to-css-variable-border.ts
@@ -10,7 +10,7 @@ import {
 import { getArrowFunctionsWithOneArgument } from '../utils/function.js'
 
 const getBorderStyle = (borderCallExpression: CallExpression<ts.CallExpression>) => {
-  const thinkNess = borderCallExpression
+  const width = borderCallExpression
     .getArguments()
     .find(Node.isNumericLiteral)
     ?.getText()
@@ -22,41 +22,26 @@ const getBorderStyle = (borderCallExpression: CallExpression<ts.CallExpression>)
     ?.getText()
     .slice(1, -1)
 
+  if (!color || !width) { return null }
+
   const borderDirection = borderCallExpression
     .getArguments()
     .find(Node.isObjectLiteralExpression)
 
-  const hasTop = borderDirection?.getProperty('top')?.getText() !== 'top: false'
-  const hasRight = borderDirection?.getProperty('right')?.getText() !== 'right: false'
-  const hasBottom = borderDirection?.getProperty('bottom')?.getText() !== 'bottom: false'
-  const hasLeft = borderDirection?.getProperty('left')?.getText() !== 'left: false'
+  const hasBorders = ['top', 'right', 'bottom', 'left']
+    .map((value) => borderDirection?.getProperty(value)?.getText() !== `${value}: false`)
 
   let borderStyle = ''
-  let hasAdded = false
-
-  if (!thinkNess || !color) { return null }
 
-  if (hasTop && hasRight && hasBottom && hasLeft) { borderStyle += `border: ${thinkNess}px solid var(--${color});\n` } else {
-    if (hasTop) {
-      if (hasAdded) { borderStyle += '  ' }
-      hasAdded = true
-      borderStyle += `border-top: ${thinkNess}px solid var(--${color});\n`
-    }
-    if (hasRight) {
-      if (hasAdded) { borderStyle += '  ' }
-      hasAdded = true
-      borderStyle += `border-right: ${thinkNess}px solid var(--${color});\n`
-    }
-    if (hasBottom) {
-      if (hasAdded) { borderStyle += '  ' }
-      hasAdded = true
-      borderStyle += `border-bottom: ${thinkNess}px solid var(--${color});\n`
-    }
-    if (hasLeft) {
-      if (hasAdded) { borderStyle += '  ' }
-      hasAdded = true
-      borderStyle += `border-left: ${thinkNess}px solid var(--${color});\n`
-    }
+  if (hasBorders.every((v => v))) {
+    borderStyle = `border: ${width}px solid var(--${color});\n`
+  } else {
+    borderStyle += `border-color: var(--${color});\n`
+    borderStyle += `  border-style: ${hasBorders
+      .map((hasBorder) => (hasBorder ? 'solid' : 'none'))
+      .join(' ')
+    };\n`
+    borderStyle += `  border-width: ${width}px;\n`
   }
 
   return borderStyle
diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border1.output.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border1.output.tsx
index ac51e04d14..1cd239279f 100644
--- a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border1.output.tsx
+++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border1.output.tsx
@@ -1,12 +1,14 @@
 
 const Wrapper = styled.div`
-  border-bottom: 0.5px solid var(--bdr-black-light);
+  border-color: var(--bdr-black-light);
+  border-style: none none solid none;
+  border-width: 0.5px;
 `
 
 const Wrapper = styled.div`
-  border-top: 1px solid var(--bg-txt-black);
-  border-right: 1px solid var(--bg-txt-black);
-  border-left: 1px solid var(--bg-txt-black);
+  border-color: var(--bg-txt-black);
+  border-style: solid solid none solid;
+  border-width: 1px;
 `
 
 const Wrapper = styled.div`
@@ -21,6 +23,8 @@ const div = style.div`
   ${({ divider }) =>
     divider &&
     css`
-      border-bottom: 1px solid var(--bdr-black-light);
+      border-color: var(--bdr-black-light);
+  border-style: none none solid none;
+  border-width: 1px;
     `}
 `