Merge pull request #1 from MichaelAllenWarner/decoration-utilities

Add `text-decoration-color` utilities (including opacity utilities)

Author: MichaelAllenWarner

src/corePlugins.js

@@ -1801,6 +1801,31 @@ export let corePlugins = {
     })
   },
 
+  textDecorationColor: ({ matchUtilities, theme, corePlugins }) => {
+    matchUtilities(
+      {
+        decoration: (value) => {
+          if (!corePlugins('textDecorationOpacity')) {
+            return {
+              'text-decoration-color': toColorValue(value),
+            }
+          }
+
+          return withAlphaVariable({
+            color: value,
+            property: 'text-decoration-color',
+            variable: '--tw-decoration-opacity',
+          })
+        },
+      },
+      { values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
+    )
+  },
+
+  textDecorationOpacity: createUtilityPlugin('textDecorationOpacity', [
+    ['decoration-opacity', ['--tw-decoration-opacity']],
+  ]),
+
   fontSmoothing: ({ addUtilities }) => {
     addUtilities({
       '.antialiased': {

stubs/defaultConfig.stub.js

@@ -787,6 +787,8 @@ module.exports = {
       2: '2',
     },
     textColor: ({ theme }) => theme('colors'),
+    textDecorationColor: ({ theme }) => theme('colors'),
+    textDecorationOpacity: ({ theme }) => theme('opacity'),
     textIndent: ({ theme }) => ({
       ...theme('spacing'),
     }),

tests/arbitrary-values.test.css

@@ -807,6 +807,31 @@
 .text-opacity-\[var\(--value\)\] {
   --tw-text-opacity: var(--value);
 }
+.decoration-\[black\] {
+  --tw-decoration-opacity: 1;
+  text-decoration-color: rgb(0 0 0 / var(--tw-decoration-opacity));
+}
+.decoration-\[rgb\(123\2c 123\2c 123\)\] {
+  --tw-decoration-opacity: 1;
+  text-decoration-color: rgb(123 123 123 / var(--tw-decoration-opacity));
+}
+.decoration-\[rgb\(123\2c _123\2c _123\)\] {
+  --tw-decoration-opacity: 1;
+  text-decoration-color: rgb(123 123 123 / var(--tw-decoration-opacity));
+}
+.decoration-\[rgb\(123_123_123\)\] {
+  --tw-decoration-opacity: 1;
+  text-decoration-color: rgb(123 123 123 / var(--tw-decoration-opacity));
+}
+.decoration-\[color\:var\(--color\)\] {
+  text-decoration-color: var(--color);
+}
+.decoration-opacity-\[0\.8\] {
+  --tw-decoration-opacity: 0.8;
+}
+.decoration-opacity-\[var\(--value\)\] {
+  --tw-decoration-opacity: var(--value);
+}
 .placeholder-\[var\(--placeholder\)\]::placeholder {
   color: var(--placeholder);
 }

tests/arbitrary-values.test.html

@@ -297,6 +297,15 @@
     <div class="text-opacity-[0.8]"></div>
     <div class="text-opacity-[var(--value)]"></div>
 
+    <div class="decoration-[black]"></div>
+    <div class="decoration-[rgb(123,123,123)]"></div>
+    <div class="decoration-[rgb(123,_123,_123)]"></div>
+    <div class="decoration-[rgb(123_123_123)]"></div>
+    <div class="decoration-[color:var(--color)]"></div>
+
+    <div class="decoration-opacity-[0.8]"></div>
+    <div class="decoration-opacity-[var(--value)]"></div>
+
     <div class="placeholder-[var(--placeholder)]"></div>
 
     <div class="placeholder-opacity-[var(--placeholder-opacity)]"></div>

tests/basic-usage.test.css

@@ -773,6 +773,13 @@
 .underline {
   text-decoration: underline;
 }
+.decoration-green-300 {
+  --tw-decoration-opacity: 1;
+  text-decoration-color: rgb(134 239 172 / var(--tw-decoration-opacity));
+}
+.decoration-opacity-50 {
+  --tw-decoration-opacity: 0.5;
+}
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

tests/basic-usage.test.html

@@ -159,8 +159,10 @@
     <div class="text-center"></div>
     <div class="indent-6 -indent-12"></div>
     <div class="text-indigo-500"></div>
-    <div class="underline"></div>
     <div class="text-opacity-10"></div>
+    <div class="underline"></div>
+    <div class="decoration-green-300"></div>
+    <div class="decoration-opacity-50"></div>
     <div class="overflow-ellipsis truncate"></div>
     <div class="uppercase"></div>
     <div class="transform transform-gpu transform-none"></div>