From e8ee9c1ca89ca15569d4946df6abd8976d484df2 Mon Sep 17 00:00:00 2001 From: Sascha Tandel Date: Sat, 2 Jan 2021 07:29:59 +0100 Subject: [PATCH] fix: use long hand properties for transition --- src/__tests__/api.json | 22 +++++++++++++++------- src/twind/plugins.ts | 11 +++-------- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/__tests__/api.json b/src/__tests__/api.json index 614d2f0ed..ab63f36f5 100644 --- 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 index ad7c43ff6..d2125c9e0 100644 --- 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 }) => {