Fix decoration utility ambiguity (#6217)

* 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.

* 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.

Author: RobinMalfait

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'] }
     )
   },
 

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;
 }

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>
 

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: [