Add support for arbitrary transition-duration

Author: adamwathan

src/corePlugins/transitionDuration.js

@@ -1,9 +1,9 @@
-const { nameClass } = require('../pluginUtils')
+const { nameClass, asValue } = require('../pluginUtils')
 
 module.exports = function ({ matchUtilities, jit: { theme } }) {
   matchUtilities({
     duration: (modifier, { theme }) => {
-      let value = theme.transitionDuration[modifier]
+      let value = asValue(modifier, theme.transitionDuration)
 
       if (value === undefined) {
         return []

tests/08-arbitrary-values.test.css

@@ -76,3 +76,6 @@
 .text-\[2\.23rem\] {
   font-size: 2.23rem;
 }
+.duration-\[2s\] {
+  transition-duration: 2s;
+}

tests/08-arbitrary-values.test.html

@@ -21,5 +21,6 @@
     <div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
     <div class="rotate-[23deg] rotate-[2.3rad] rotate-[401grad] rotate-[1.5turn]"></div>
     <div class="text-[2.23rem]"></div>
+    <div class="duration-[2s]"></div>
   </body>
 </html>