Add arbitrary value support for transition-property (#5481)

Co-Authored-By: Eric F. <2483476+ericbf@users.noreply.github.com>

Co-authored-by: Eric F. <2483476+ericbf@users.noreply.github.com>

src/corePlugins.js

@@ -2195,7 +2195,7 @@ export let transitionProperty = ({ matchUtilities, theme }) => {
         }
       },
     },
-    { values: theme('transitionProperty'), type: 'lookup' }
+    { values: theme('transitionProperty'), type: 'any' }
   )
 }
 

tests/arbitrary-values.test.css

@@ -448,6 +448,11 @@
   --tw-backdrop-sepia: sepia(0.38);
   backdrop-filter: var(--tw-backdrop-filter);
 }
+.transition-\[opacity\2c width\] {
+  transition-property: opacity, width;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .delay-\[var\(--delay\)\] {
   transition-delay: var(--delay);
 }

tests/arbitrary-values.test.html

@@ -60,6 +60,7 @@
     <div class="text-[length:var(--font-size)]"></div>
     <div class="text-[color:var(--color)]"></div>
     <div class="text-[angle:var(--angle)]"></div>
+    <div class="transition-[opacity,width]"></div>
     <div class="duration-[2s]"></div>
     <div class="m-[7px]"></div>
     <div class="mx-[7px]"></div>