From d8bd507b9b04cd2edc07d5b87a01c2328f41e731 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 20 May 2021 13:35:39 -0400
Subject: [PATCH] JIT: Add per-side border colors (#4404)

---
 src/plugins/borderColor.js       | 68 +++++++++++++++++++++++++++++++-
 tests/jit/basic-usage.test.css   | 16 ++++++++
 tests/jit/basic-usage.test.html  |  2 +-
 tests/jit/kitchen-sink.test.css  |  3 ++
 tests/jit/kitchen-sink.test.html |  1 +
 5 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js
index 1f12045bcc73..bdd826eea861 100644
--- a/src/plugins/borderColor.js
+++ b/src/plugins/borderColor.js
@@ -2,7 +2,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function () {
-  return function ({ addBase, matchUtilities, theme, variants, corePlugins }) {
+  return function ({ config, addBase, matchUtilities, theme, variants, corePlugins }) {
     if (!corePlugins('borderOpacity')) {
       addBase({
         '*, ::before, ::after': {
@@ -41,5 +41,71 @@ export default function () {
         type: 'color',
       }
     )
+
+    if (config('mode') === 'jit') {
+      matchUtilities(
+        {
+          'border-t': (value) => {
+            if (!corePlugins('borderOpacity')) {
+              return {
+                'border-top-color': value,
+              }
+            }
+
+            return withAlphaVariable({
+              color: value,
+              property: 'border-top-color',
+              variable: '--tw-border-opacity',
+            })
+          },
+          'border-r': (value) => {
+            if (!corePlugins('borderOpacity')) {
+              return {
+                'border-right-color': value,
+              }
+            }
+
+            return withAlphaVariable({
+              color: value,
+              property: 'border-right-color',
+              variable: '--tw-border-opacity',
+            })
+          },
+          'border-b': (value) => {
+            if (!corePlugins('borderOpacity')) {
+              return {
+                'border-bottom-color': value,
+              }
+            }
+
+            return withAlphaVariable({
+              color: value,
+              property: 'border-bottom-color',
+              variable: '--tw-border-opacity',
+            })
+          },
+          'border-l': (value) => {
+            if (!corePlugins('borderOpacity')) {
+              return {
+                'border-left-color': value,
+              }
+            }
+
+            return withAlphaVariable({
+              color: value,
+              property: 'border-left-color',
+              variable: '--tw-border-opacity',
+            })
+          },
+        },
+        {
+          values: (({ DEFAULT: _, ...colors }) => colors)(
+            flattenColorPalette(theme('borderColor'))
+          ),
+          variants: variants('borderColor'),
+          type: 'color',
+        }
+      )
+    }
   }
 }
diff --git a/tests/jit/basic-usage.test.css b/tests/jit/basic-usage.test.css
index 5cac102891a4..ad799e79c02f 100644
--- a/tests/jit/basic-usage.test.css
+++ b/tests/jit/basic-usage.test.css
@@ -417,6 +417,22 @@
   --tw-border-opacity: 1;
   border-color: rgba(0, 0, 0, var(--tw-border-opacity));
 }
+.border-t-black {
+  --tw-border-opacity: 1;
+  border-top-color: rgba(0, 0, 0, var(--tw-border-opacity));
+}
+.border-r-black {
+  --tw-border-opacity: 1;
+  border-right-color: rgba(0, 0, 0, var(--tw-border-opacity));
+}
+.border-b-black {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgba(0, 0, 0, var(--tw-border-opacity));
+}
+.border-l-black {
+  --tw-border-opacity: 1;
+  border-left-color: rgba(0, 0, 0, var(--tw-border-opacity));
+}
 .border-opacity-10 {
   --tw-border-opacity: 0.1;
 }
diff --git a/tests/jit/basic-usage.test.html b/tests/jit/basic-usage.test.html
index 1e97f5fdf4ce..95f08a2d2d6f 100644
--- a/tests/jit/basic-usage.test.html
+++ b/tests/jit/basic-usage.test.html
@@ -25,7 +25,7 @@
     <div class="bg-cover"></div>
     <div class="bg-origin-border bg-origin-padding bg-origin-content"></div>
     <div class="border-collapse"></div>
-    <div class="border-black"></div>
+    <div class="border-black border-t-black border-r-black border-b-black border-l-black"></div>
     <div class="border-opacity-10"></div>
     <div class="rounded-md"></div>
     <div class="border-solid"></div>
diff --git a/tests/jit/kitchen-sink.test.css b/tests/jit/kitchen-sink.test.css
index cb2d219bbf8b..5735b82f7d3a 100644
--- a/tests/jit/kitchen-sink.test.css
+++ b/tests/jit/kitchen-sink.test.css
@@ -535,6 +535,9 @@ div {
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
       var(--tw-shadow);
   }
+  .md\:hover\:border-r-blue-500\/30:hover {
+    border-right-color: rgba(59, 130, 246, 0.3);
+  }
   .md\:hover\:opacity-20:hover {
     opacity: 0.2;
   }
diff --git a/tests/jit/kitchen-sink.test.html b/tests/jit/kitchen-sink.test.html
index 13254bece80b..6a57cfe0f187 100644
--- a/tests/jit/kitchen-sink.test.html
+++ b/tests/jit/kitchen-sink.test.html
@@ -16,6 +16,7 @@
     <div class="test-apply-font-variant"></div>
     <div class="mt-6"></div>
     <div class="bg-black"></div>
+    <div class="md:hover:border-r-blue-500/30"></div>
     <div class="custom-util"></div>
     <div class="hover:custom-util"></div>
     <div class="group-hover:custom-util"></div>