add caretColor plugin

__tests__/plugins/caretColor.test.js

@@ -0,0 +1,28 @@
+import invokePlugin from '../util/invokePlugin'
+import plugin from '../../src/plugins/caretColor'
+
+test('defining color as a function', () => {
+  const config = {
+    theme: {
+      caretColor: {
+        black: ({ opacityVariable: _ }) => 'black',
+      },
+    },
+    variants: {
+      caretColor: [],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+
+  expect(utilities).toEqual([
+    [
+      {
+        '.caret-black': {
+          'caret-color': 'black',
+        },
+      },
+      [],
+    ],
+  ])
+})

src/corePluginList.js

@@ -24,6 +24,8 @@ export const corePluginList = [
   'borderStyle',
   'borderWidth',
   'boxSizing',
+  'caretColor',
+  'caretOpacity',
   'cursor',
   'display',
   'flexDirection',

src/plugins/caretColor.js

@@ -0,0 +1,31 @@
+import _ from 'lodash'
+import flattenColorPalette from '../util/flattenColorPalette'
+import nameClass from '../util/nameClass'
+import toColorValue from '../util/toColorValue'
+import withAlphaVariable from '../util/withAlphaVariable'
+
+export default function () {
+  return function ({ addUtilities, theme, variants, corePlugins }) {
+    const colors = flattenColorPalette(theme('textColor'))
+
+    const getProperties = (value) => {
+      if (corePlugins('caretOpacity')) {
+        return withAlphaVariable({
+          color: value,
+          property: 'caret-color',
+          variable: '--tw-caret-opacity',
+        })
+      }
+
+      return { 'caret-color': toColorValue(value) }
+    }
+
+    const utilities = _.fromPairs(
+      _.map(colors, (value, modifier) => {
+        return [nameClass('caret', modifier), getProperties(value)]
+      })
+    )
+
+    addUtilities(utilities, variants('caretColor'))
+  }
+}

src/plugins/caretOpacity.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function () {
+  return createUtilityPlugin('caretOpacity', [['caret-opacity', ['--tw-caret-opacity']]])
+}

src/plugins/index.js

@@ -20,6 +20,8 @@ export { default as borderStyle } from './borderStyle'
 export { default as borderWidth } from './borderWidth'
 export { default as boxShadow } from './boxShadow'
 export { default as boxSizing } from './boxSizing'
+export { default as caretColor } from './caretColor'
+export { default as caretOpacity } from './caretOpacity'
 export { default as clear } from './clear'
 export { default as container } from './container'
 export { default as cursor } from './cursor'