From cda6d4d9953eaf5baa355e5c35aba7dfcecfca0c Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 2 Aug 2020 08:01:16 -0400 Subject: [PATCH 1/2] Add keyframes as utilities instead of base --- __tests__/fixtures/tailwind-output-ie11.css | 88 +++++++++---------- .../fixtures/tailwind-output-important.css | 88 +++++++++---------- .../tailwind-output-no-color-opacity.css | 88 +++++++++---------- __tests__/fixtures/tailwind-output.css | 88 +++++++++---------- src/plugins/animation.js | 4 +- 5 files changed, 178 insertions(+), 178 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css index 7e06186a7600..6690bfbc73fc 100644 --- a/__tests__/fixtures/tailwind-output-ie11.css +++ b/__tests__/fixtures/tailwind-output-ie11.css @@ -577,50 +577,6 @@ video { height: auto; } -@keyframes spin { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - -@keyframes ping { - 0% { - transform: scale(1); - opacity: 1; - } - - 75%, 100% { - transform: scale(2); - opacity: 0; - } -} - -@keyframes pulse { - 0%, 100% { - opacity: 1; - } - - 50% { - opacity: .5; - } -} - -@keyframes bounce { - 0%, 100% { - transform: translateY(-25%); - animation-timing-function: cubic-bezier(0.8,0,1,1); - } - - 50% { - transform: translateY(0); - animation-timing-function: cubic-bezier(0,0,0.2,1); - } -} - .container { width: 100%; } @@ -10994,6 +10950,50 @@ video { transition-delay: 1000ms; } +@keyframes spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@keyframes ping { + 0% { + transform: scale(1); + opacity: 1; + } + + 75%, 100% { + transform: scale(2); + opacity: 0; + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + + 50% { + opacity: .5; + } +} + +@keyframes bounce { + 0%, 100% { + transform: translateY(-25%); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: translateY(0); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + .animate-none { animation: none; } diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index aa8399c3b937..80abbd57061e 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -577,50 +577,6 @@ video { height: auto; } -@keyframes spin { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - -@keyframes ping { - 0% { - transform: scale(1); - opacity: 1; - } - - 75%, 100% { - transform: scale(2); - opacity: 0; - } -} - -@keyframes pulse { - 0%, 100% { - opacity: 1; - } - - 50% { - opacity: .5; - } -} - -@keyframes bounce { - 0%, 100% { - transform: translateY(-25%); - animation-timing-function: cubic-bezier(0.8,0,1,1); - } - - 50% { - transform: translateY(0); - animation-timing-function: cubic-bezier(0,0,0.2,1); - } -} - .container { width: 100%; } @@ -14416,6 +14372,50 @@ video { transition-delay: 1000ms !important; } +@keyframes spin { + from { + transform: rotate(0deg) !important; + } + + to { + transform: rotate(360deg) !important; + } +} + +@keyframes ping { + 0% { + transform: scale(1) !important; + opacity: 1 !important; + } + + 75%, 100% { + transform: scale(2) !important; + opacity: 0 !important; + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1 !important; + } + + 50% { + opacity: .5 !important; + } +} + +@keyframes bounce { + 0%, 100% { + transform: translateY(-25%) !important; + animation-timing-function: cubic-bezier(0.8,0,1,1) !important; + } + + 50% { + transform: translateY(0) !important; + animation-timing-function: cubic-bezier(0,0,0.2,1) !important; + } +} + .animate-none { animation: none !important; } diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index c3a640132caf..0d481f196ce3 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -577,50 +577,6 @@ video { height: auto; } -@keyframes spin { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - -@keyframes ping { - 0% { - transform: scale(1); - opacity: 1; - } - - 75%, 100% { - transform: scale(2); - opacity: 0; - } -} - -@keyframes pulse { - 0%, 100% { - opacity: 1; - } - - 50% { - opacity: .5; - } -} - -@keyframes bounce { - 0%, 100% { - transform: translateY(-25%); - animation-timing-function: cubic-bezier(0.8,0,1,1); - } - - 50% { - transform: translateY(0); - animation-timing-function: cubic-bezier(0,0,0.2,1); - } -} - .container { width: 100%; } @@ -11968,6 +11924,50 @@ video { transition-delay: 1000ms; } +@keyframes spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@keyframes ping { + 0% { + transform: scale(1); + opacity: 1; + } + + 75%, 100% { + transform: scale(2); + opacity: 0; + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + + 50% { + opacity: .5; + } +} + +@keyframes bounce { + 0%, 100% { + transform: translateY(-25%); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: translateY(0); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + .animate-none { animation: none; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 6251b6d39255..72d1eb126293 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -577,50 +577,6 @@ video { height: auto; } -@keyframes spin { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - -@keyframes ping { - 0% { - transform: scale(1); - opacity: 1; - } - - 75%, 100% { - transform: scale(2); - opacity: 0; - } -} - -@keyframes pulse { - 0%, 100% { - opacity: 1; - } - - 50% { - opacity: .5; - } -} - -@keyframes bounce { - 0%, 100% { - transform: translateY(-25%); - animation-timing-function: cubic-bezier(0.8,0,1,1); - } - - 50% { - transform: translateY(0); - animation-timing-function: cubic-bezier(0,0,0.2,1); - } -} - .container { width: 100%; } @@ -14416,6 +14372,50 @@ video { transition-delay: 1000ms; } +@keyframes spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@keyframes ping { + 0% { + transform: scale(1); + opacity: 1; + } + + 75%, 100% { + transform: scale(2); + opacity: 0; + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + + 50% { + opacity: .5; + } +} + +@keyframes bounce { + 0%, 100% { + transform: translateY(-25%); + animation-timing-function: cubic-bezier(0.8,0,1,1); + } + + 50% { + transform: translateY(0); + animation-timing-function: cubic-bezier(0,0,0.2,1); + } +} + .animate-none { animation: none; } diff --git a/src/plugins/animation.js b/src/plugins/animation.js index 50ad186d2920..75c7075a765c 100644 --- a/src/plugins/animation.js +++ b/src/plugins/animation.js @@ -1,14 +1,14 @@ import _ from 'lodash' export default function() { - return function({ addBase, addUtilities, e, theme, variants }) { + return function({ addUtilities, e, theme, variants }) { const keyframesConfig = theme('keyframes') const keyframesStyles = _.fromPairs( _.toPairs(keyframesConfig).map(([name, keyframes]) => { return [`@keyframes ${name}`, keyframes] }) ) - addBase(keyframesStyles) + addUtilities(keyframesStyles) const animationConfig = theme('animation') const utilities = _.fromPairs( From 8e5d8d12784145332b5bea334fffd5d069b42bbb Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 2 Aug 2020 08:14:57 -0400 Subject: [PATCH 2/2] 1.6.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9f87dbd9f1ba..4c3ed49f083d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwindcss", - "version": "1.6.0", + "version": "1.6.1", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "main": "lib/index.js",