From cc541ee0084b137d3eaa979f4eecb5a819575501 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 29 Nov 2021 15:13:44 +0100
Subject: [PATCH 1/2] remove `any` data type for decoration color plugin

The main reason for the `any` type is so that we don't have to parse the
value and can assume that this plugin handles "any" value you give it.

This is useful because `decoration-[var(--something)]` would be
correctly translated to the correct decoration property. However, we
introduce another plugin with the same `decoration` prefix.

This means that now both `textDecorationColor` and
`textDecorationThickness` have the same base utility name: `decoration`.

- `textDecorationColor` had ['color', 'any']
- `textDecorationThickness` had ['length', 'percentage']

This means that `3px` fit both in the `length` data type of the
`textDecorationThickness` plugin and in the `any` data type of the
`textDecorationColor` plugin.

Removing the `any` fixes this.

TL;DR: Only have `any` when there are no conflicting utility names.
---
 src/corePlugins.js             |  2 +-
 tests/arbitrary-values.test.js | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 1da6b0e19e35..e623500db746 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -1670,7 +1670,7 @@ export let corePlugins = {
           return { 'text-decoration-color': toColorValue(value) }
         },
       },
-      { values: flattenColorPalette(theme('textDecorationColor')), type: ['color', 'any'] }
+      { values: flattenColorPalette(theme('textDecorationColor')), type: ['color'] }
     )
   },
 
diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
index 7856a3b24b92..db9890e985da 100644
--- a/tests/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -16,6 +16,28 @@ test('arbitrary values', () => {
   })
 })
 
+it('should be possible to differentiate between decoration utilities', () => {
+  let config = {
+    content: [
+      {
+        raw: html` <div class="decoration-[3px] decoration-[#ccc]"></div> `,
+      },
+    ],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .decoration-\[\#ccc\] {
+        text-decoration-color: #ccc;
+      }
+
+      .decoration-\[3px\] {
+        text-decoration-thickness: 3px;
+      }
+    `)
+  })
+})
+
 it('should support modifiers for arbitrary values that contain the separator', () => {
   let config = {
     content: [

From 052534e32b09e3f9fa32d8559d0729de0e4d80fb Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 29 Nov 2021 15:17:45 +0100
Subject: [PATCH 2/2] remove utility that doesn't generate css

Having `decoration-[var(--abc)]` is ambiguous because there are multiple
plugins that have a `decoration` utility name. In order for this to work
you have to prefix it with the type: `decoration-[color:var(--abc)]`
which is already tested in this file.
---
 tests/arbitrary-values.test.css  | 3 ---
 tests/arbitrary-values.test.html | 1 -
 2 files changed, 4 deletions(-)

diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index 8e7bcc05335b..36a032c7f3f0 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -822,9 +822,6 @@
 .decoration-\[color\:var\(--color\)\] {
   text-decoration-color: var(--color);
 }
-.decoration-\[var\(--color\)\] {
-  text-decoration-color: var(--color);
-}
 .decoration-\[length\:10px\] {
   text-decoration-thickness: 10px;
 }
diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
index 32bc60248b1a..de189af4e145 100644
--- a/tests/arbitrary-values.test.html
+++ b/tests/arbitrary-values.test.html
@@ -303,7 +303,6 @@
     <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-[var(--color)]"></div>
 
     <div class="decoration-[length:10px]"></div>