add border edge colors (#373)

tw-in-js · Oct 27, 2022 · 21a9671 · 21a9671
1 parent 05d56f6
commit 21a9671
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/src/__tests__/api.json b/src/__tests__/api.json
@@ -223,6 +223,11 @@
   "border-blue-300": ".border-blue-300{--tw-border-opacity:1;border-color:#93c5fd;border-color:rgba(147,197,253,var(--tw-border-opacity))}",
   "border-fuchsia": ".border-fuchsia{border-color:fuchsia}",
   "border-opacity-95": ".border-opacity-95{--tw-border-opacity:0.95}",
+  "border-l-transparent": ".border-l-transparent{border-left-color:transparent}",
+  "border-t-transparent": ".border-t-transparent{border-top-color:transparent}",
+  "border-x-transparent": ".border-x-transparent{border-left-color:transparent;border-right-color:transparent}",
+  "border-y-transparent": ".border-y-transparent{border-bottom-color:transparent;border-top-color:transparent}",
+  "border-br-transparent": ".border-br-transparent{border-bottom-color:transparent;border-right-color:transparent}",
   "shadow": [
     "*{--tw-shadow:0 0 transparent}",
     ".shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);box-shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}"
@@ -706,7 +711,6 @@
       ".space-x-reverse>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}"
     ]
   ],
-
   "divide-x": ".divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px * var(--tw-divide-x-reverse));border-left-width:1px;border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}",
   "divide-x-0": ".divide-x-0>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(0px * var(--tw-divide-x-reverse));border-left-width:0px;border-left-width:calc(0px * calc(1 - var(--tw-divide-x-reverse)))}",
   "divide-x-2": ".divide-x-2>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(2px * var(--tw-divide-x-reverse));border-left-width:2px;border-left-width:calc(2px * calc(1 - var(--tw-divide-x-reverse)))}",

diff --git a/src/twind/plugins.ts b/src/twind/plugins.ts
@@ -201,7 +201,7 @@ const gridPlugin = (kind: 'column' | 'row'): PluginHandler => (params, { theme }
   }
 }
 
-const border: PluginHandler = (params, { theme }, id): CSSRules | string | undefined => {
+const border: PluginHandler = (params, { theme }, id) => {
   switch (params[0]) {
     case 'solid':
     case 'dashed':
@@ -225,6 +225,30 @@ const border: PluginHandler = (params, { theme }, id): CSSRules | string | undef
       )
 }
 
+const borderEdges: PluginHandler = (params, context, id) => {
+  const edges = expandEdges(params[0])?.map(capitalize)
+  if (edges) {
+    params = tail(params)
+  }
+
+  let rules = border(params, context, id)
+  if (edges && rules && typeof rules === 'object') {
+    rules = Object.entries(rules).reduce((newRules, [key, value]) => {
+      if (key.startsWith('border')) {
+        for (const edge of edges) {
+          newRules[key.slice(0, 6) + edge + key.slice(6)] = value
+        }
+      } else {
+        newRules[key] = value
+      }
+
+      return newRules
+    }, {} as CSSRules)
+  }
+
+  return rules
+}
+
 const transform = (gpu?: boolean): string =>
   (gpu
     ? 'translate3d(var(--tw-translate-x,0),var(--tw-translate-y,0),0)'
@@ -795,10 +819,7 @@ export const corePlugins: Record<string, Plugin | undefined> = {
   // .border-t	border-top-width: 1px;
   // .border-t-0	border-top-width: 0px;
   // .border-t-xs
-  border: (params, context, id) =>
-    expandEdges(params[0])
-      ? edges(context.theme('borderWidth', tail(params)), params[0], 'border', 'width')
-      : border(params, context, id),
+  border: borderEdges,
 
   // .divide-x
   // .divide-x-8