fix: use long hand properties for transition

tw-in-js · Jan 2, 2021 · e8ee9c1 · e8ee9c1
1 parent da82c54
commit e8ee9c1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/src/__tests__/api.json b/src/__tests__/api.json
@@ -223,13 +223,13 @@
   "object-left-bottom": ".object-left-bottom{object-position:left bottom}",
   "object-right-top": ".object-right-top{object-position:right top}",
   "object-left-top": ".object-left-top{object-position:left top}",
-  "transition": ".transition{transition:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform 150ms cubic-bezier(0.4,0,0.2,1)}",
+  "transition": ".transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}",
   "transition-none": ".transition-none{transition-property:none}",
-  "transition-colors": ".transition-colors{transition:background-color,border-color,color,fill,stroke 150ms cubic-bezier(0.4,0,0.2,1)}",
-  "transition-shadow": ".transition-shadow{transition:box-shadow 150ms cubic-bezier(0.4,0,0.2,1)}",
-  "transition-opacity": ".transition-opacity{transition:opacity 150ms cubic-bezier(0.4,0,0.2,1)}",
-  "transition-transform": ".transition-transform{transition:transform 150ms cubic-bezier(0.4,0,0.2,1)}",
-  "transition-all": ".transition-all{transition:all 150ms cubic-bezier(0.4,0,0.2,1)}",
+  "transition-colors": ".transition-colors{transition-property:background-color,border-color,color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}",
+  "transition-shadow": ".transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}",
+  "transition-opacity": ".transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}",
+  "transition-transform": ".transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}",
+  "transition-all": ".transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}",
   "ease": ".ease{transition-timing-function:cubic-bezier(0.4,0,0.2,1)}",
   "ease-linear": ".ease-linear{transition-timing-function:linear}",
   "ease-in": ".ease-in{transition-timing-function:cubic-bezier(0.4,0,1,1)}",
@@ -615,7 +615,7 @@
   "\n  text(4xl underline)\n  font(bold sans)\n  transition\n  hover:(transform rotate-6 scale-125 cursor-pointer)\n  active:(transform -rotate-12 scale-150)\n": [
     "text-4xl text-underline font-bold font-sans transition hover:transform hover:rotate-6 hover:scale-125 hover:cursor-pointer active:transform active:-rotate-12 active:scale-150",
     [
-      ".transition{transition:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform 150ms cubic-bezier(0.4,0,0.2,1)}",
+      ".transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}",
       ".text-4xl{font-size:2.25rem;line-height:2.5rem}",
       ".text-underline{text-decoration:underline}",
       ".font-bold{font-weight:700}",
@@ -629,6 +629,14 @@
       ".active\\:-rotate-12:active{--tw-rotate:calc(12deg * -1);transform:rotate(calc(12deg * -1));transform:translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))}"
     ]
   ],
+  "transition duration-500 ease-in-out": [
+    "transition duration-500 ease-in-out",
+    [
+      ".transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}",
+      ".duration-500{transition-duration:500ms}",
+      ".ease-in-out{transition-timing-function:cubic-bezier(0.4,0,0.2,1)}"
+    ]
+  ],
   "space-x-0": ".space-x-0>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0px * var(--tw-space-x-reverse));margin-left:0px;margin-left:calc(0px * calc(1 - var(--tw-space-x-reverse)))}",
   "-space-x-0": ".-space-x-0>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(calc(0px * -1) * var(--tw-space-x-reverse));margin-left:calc(0px * -1);margin-left:calc(calc(0px * -1) * calc(1 - var(--tw-space-x-reverse)))}",
   "space-x-2": ".space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:0.5rem;margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}",

diff --git a/src/twind/plugins.ts b/src/twind/plugins.ts
@@ -845,14 +845,9 @@ export const corePlugins: Plugins = {
   'transition-none': { 'transition-property': 'none' },
 
   transition: (params, { theme }) => ({
-    transition: joinTruthy(
-      [
-        theme('transitionProperty', params),
-        theme('transitionDuration', ''),
-        theme('transitionTimingFunction', ''),
-      ],
-      ' ',
-    ),
+    transitionProperty: theme('transitionProperty', params),
+    transitionTimingFunction: theme('transitionTimingFunction', ''),
+    transitionDuration: theme('transitionDuration', ''),
   }),
 
   container: (params, { theme }) => {