From 77dfac2bfacbd4bb835716afe77a41a5d4835daa Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 28 May 2021 13:55:42 -0400
Subject: [PATCH] JIT: Add caret-color utilities (#4499)

Co-Authored-By: Jesse Katsumata <niconico.clarinet@gmail.com>

Co-authored-by: Jesse Katsumata <niconico.clarinet@gmail.com>
---
 src/corePlugins.js              |  2 +-
 src/plugins/caretColor.js       | 19 +++++++++++++++++++
 src/plugins/index.js            |  1 +
 stubs/defaultConfig.stub.js     |  1 +
 tests/jit/basic-usage.test.css  |  3 +++
 tests/jit/basic-usage.test.html |  1 +
 6 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/plugins/caretColor.js

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 1bafdd3befa1..ce06e3133d13 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -1,7 +1,7 @@
 import * as plugins from './plugins/index.js'
 import configurePlugins from './util/configurePlugins'
 
-const jitOnlyPlugins = ['content']
+const jitOnlyPlugins = ['caretColor', 'content']
 
 export default function ({ corePlugins: corePluginConfig }) {
   corePluginConfig = corePluginConfig.filter((pluginName) => !jitOnlyPlugins.includes(pluginName))
diff --git a/src/plugins/caretColor.js b/src/plugins/caretColor.js
new file mode 100644
index 000000000000..3cd9d0ffc654
--- /dev/null
+++ b/src/plugins/caretColor.js
@@ -0,0 +1,19 @@
+import flattenColorPalette from '../util/flattenColorPalette'
+import toColorValue from '../util/toColorValue'
+
+export default function () {
+  return function ({ matchUtilities, theme, variants }) {
+    matchUtilities(
+      {
+        caret: (value) => {
+          return { 'caret-color': toColorValue(value) }
+        },
+      },
+      {
+        values: flattenColorPalette(theme('caretColor')),
+        variants: variants('caretColor'),
+        type: ['color', 'any'],
+      }
+    )
+  }
+}
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 8107a2eaf9d7..c9ce08ba0805 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -123,6 +123,7 @@ export { default as textDecoration } from './textDecoration'
 export { default as fontSmoothing } from './fontSmoothing'
 export { default as placeholderColor } from './placeholderColor'
 export { default as placeholderOpacity } from './placeholderOpacity'
+export { default as caretColor } from './caretColor'
 
 export { default as opacity } from './opacity'
 export { default as backgroundBlendMode } from './backgroundBlendMode'
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index dcc51b6fbc1a..ecaac7fc81ba 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -165,6 +165,7 @@ module.exports = {
       inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
       none: 'none',
     },
+    caretColor: (theme) => theme('colors'),
     contrast: {
       0: '0',
       50: '.5',
diff --git a/tests/jit/basic-usage.test.css b/tests/jit/basic-usage.test.css
index 060f1c119cfd..b9681901d289 100644
--- a/tests/jit/basic-usage.test.css
+++ b/tests/jit/basic-usage.test.css
@@ -604,6 +604,9 @@
 .placeholder-opacity-60::placeholder {
   --tw-placeholder-opacity: 0.6;
 }
+.caret-red-600 {
+  caret-color: #dc2626;
+}
 .opacity-90 {
   opacity: 0.9;
 }
diff --git a/tests/jit/basic-usage.test.html b/tests/jit/basic-usage.test.html
index 5c79de934167..37d6a2ad560a 100644
--- a/tests/jit/basic-usage.test.html
+++ b/tests/jit/basic-usage.test.html
@@ -100,6 +100,7 @@
     <div class="place-content-start"></div>
     <div class="placeholder-green-300"></div>
     <div class="placeholder-opacity-60"></div>
+    <div class="caret-red-600"></div>
     <div class="place-items-end"></div>
     <div class="place-self-center"></div>
     <div class="pointer-events-none"></div>