From 364330ee7feb7efc352082d16f05cc58a05d9f4e Mon Sep 17 00:00:00 2001 From: vitorrd Date: Fri, 21 Jan 2022 20:53:59 -0400 Subject: [PATCH 1/7] Add prefix alone to animation names. Fixes #7149. --- src/corePlugins.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index fdcc673d8a14..75d3b8aca07e 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -3,6 +3,7 @@ import * as path from 'path' import postcss from 'postcss' import createUtilityPlugin from './util/createUtilityPlugin' import buildMediaQuery from './util/buildMediaQuery' +import escapeClassName from './util/escapeClassName' import parseAnimationValue from './util/parseAnimationValue' import flattenColorPalette from './util/flattenColorPalette' import withAlphaVariable, { withAlphaValue } from './util/withAlphaVariable' @@ -578,11 +579,10 @@ export let corePlugins = { }) }, - animation: ({ matchUtilities, theme, prefix }) => { - let prefixName = (name) => prefix(`.${name}`).slice(1) + animation: ({ matchUtilities, theme, prefix, config }) => { let keyframes = Object.fromEntries( Object.entries(theme('keyframes') ?? {}).map(([key, value]) => { - return [key, { [`@keyframes ${prefixName(key)}`]: value }] + return [key, { [`@keyframes ${config('prefix')}${escapeClassName(key)}`]: value }] }) ) @@ -599,7 +599,7 @@ export let corePlugins = { if (name === undefined || keyframes[name] === undefined) { return value } - return value.replace(name, prefixName(name)) + return value.replace(name, `${config('prefix')}${escapeClassName(name)}`) }) .join(', '), }, From d4b5b6376cde369dc4dda7ecb1c722b9ae8e27af Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 1 Mar 2022 13:38:09 -0500 Subject: [PATCH 2/7] Add test for keyframe animations with a dot in the name --- tests/animations.test.js | 44 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/tests/animations.test.js b/tests/animations.test.js index 0a77a4c4e415..10f7655f4169 100644 --- a/tests/animations.test.js +++ b/tests/animations.test.js @@ -181,3 +181,47 @@ test('multiple custom', () => { `) }) }) + +fit('with dots in the name', () => { + let config = { + content: [{ + raw: html` +
+
+ ` + }], + theme: { + extend: { + keyframes: { + 'zoom-.5': { to: { transform: 'scale(0.5)' } }, + 'zoom-1.5': { to: { transform: 'scale(1.5)' } }, + }, + animation: { + 'zoom-.5': 'zoom-.5 2s', + 'zoom-1.5': 'zoom-1.5 2s', + }, + }, + }, + } + + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + @keyframes zoom-\.5 { + to { + transform: scale(0.5); + } + } + .animate-zoom-\.5 { + animation: zoom-\.5 2s; + } + @keyframes zoom-1\.5 { + to { + transform: scale(1.5); + } + } + .animate-zoom-1\.5 { + animation: zoom-1\.5 2s; + } + `) + }) +}) From 88d0cebd8ee24e33fbb0174d400e814a74bd3376 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 1 Mar 2022 13:42:13 -0500 Subject: [PATCH 3/7] Add test for prefixed version --- tests/animations.test.js | 47 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) diff --git a/tests/animations.test.js b/tests/animations.test.js index 10f7655f4169..87d31a6c26c7 100644 --- a/tests/animations.test.js +++ b/tests/animations.test.js @@ -182,7 +182,7 @@ test('multiple custom', () => { }) }) -fit('with dots in the name', () => { +test('with dots in the name', () => { let config = { content: [{ raw: html` @@ -225,3 +225,48 @@ fit('with dots in the name', () => { `) }) }) + +test('with dots in the name and prefix', () => { + let config = { + prefix: 'tw-', + content: [{ + raw: html` +
+
+ ` + }], + theme: { + extend: { + keyframes: { + 'zoom-.5': { to: { transform: 'scale(0.5)' } }, + 'zoom-1.5': { to: { transform: 'scale(1.5)' } }, + }, + animation: { + 'zoom-.5': 'zoom-.5 2s', + 'zoom-1.5': 'zoom-1.5 2s', + }, + }, + }, + } + + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + @keyframes tw-zoom-\.5 { + to { + transform: scale(0.5); + } + } + .tw-animate-zoom-\.5 { + animation: tw-zoom-\.5 2s; + } + @keyframes tw-zoom-1\.5 { + to { + transform: scale(1.5); + } + } + .tw-animate-zoom-1\.5 { + animation: tw-zoom-1\.5 2s; + } + `) + }) +}) From 6ce4fddffcd2459efb0294cf2b87b239bd915ad4 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 1 Mar 2022 13:44:35 -0500 Subject: [PATCH 4/7] Fix CS --- tests/animations.test.js | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/tests/animations.test.js b/tests/animations.test.js index 87d31a6c26c7..a1c580a79bd3 100644 --- a/tests/animations.test.js +++ b/tests/animations.test.js @@ -184,12 +184,14 @@ test('multiple custom', () => { test('with dots in the name', () => { let config = { - content: [{ - raw: html` -
-
- ` - }], + content: [ + { + raw: html` +
+
+ `, + }, + ], theme: { extend: { keyframes: { @@ -229,12 +231,14 @@ test('with dots in the name', () => { test('with dots in the name and prefix', () => { let config = { prefix: 'tw-', - content: [{ - raw: html` -
-
- ` - }], + content: [ + { + raw: html` +
+
+ `, + }, + ], theme: { extend: { keyframes: { From b8df400a008e1f247bb626fdf09f024935ec8260 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 1 Mar 2022 13:51:55 -0500 Subject: [PATCH 5/7] Simplify --- src/corePlugins.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index 3ecf273baff2..ced2be2163e5 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -613,10 +613,11 @@ export let corePlugins = { }) }, - animation: ({ matchUtilities, theme, prefix, config }) => { + animation: ({ matchUtilities, theme, config }) => { + let prefixName = (name) => `${config('prefix')}${escapeClassName(name)}` let keyframes = Object.fromEntries( Object.entries(theme('keyframes') ?? {}).map(([key, value]) => { - return [key, { [`@keyframes ${config('prefix')}${escapeClassName(key)}`]: value }] + return [key, { [`@keyframes ${prefixName(key)}`]: value }] }) ) @@ -633,7 +634,7 @@ export let corePlugins = { if (name === undefined || keyframes[name] === undefined) { return value } - return value.replace(name, `${config('prefix')}${escapeClassName(name)}`) + return value.replace(name, prefixName(name)) }) .join(', '), }, From 629be5ed02fea8a75806fcd4e7ed8c8192d133f2 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 1 Mar 2022 13:55:31 -0500 Subject: [PATCH 6/7] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c42dbd18a76a..705dadaef940 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Use local user CSS cache for `@apply` ([#7524](https://github.com/tailwindlabs/tailwindcss/pull/7524)) - Invalidate context when main CSS changes ([#7626](https://github.com/tailwindlabs/tailwindcss/pull/7626)) - Only add `!` to selector class matching template candidate when using important modifier with mutli-class selectors ([#7664](https://github.com/tailwindlabs/tailwindcss/pull/7664)) +- Correctly parse and prefix animation names with dots ([#7664](https://github.com/tailwindlabs/tailwindcss/pull/7664)) ### Changed From c1d1e00d67fdd5334c5156830e8749678a6e14cf Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 1 Mar 2022 13:55:52 -0500 Subject: [PATCH 7/7] Fix --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 705dadaef940..2be85bf37b81 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,7 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Use local user CSS cache for `@apply` ([#7524](https://github.com/tailwindlabs/tailwindcss/pull/7524)) - Invalidate context when main CSS changes ([#7626](https://github.com/tailwindlabs/tailwindcss/pull/7626)) - Only add `!` to selector class matching template candidate when using important modifier with mutli-class selectors ([#7664](https://github.com/tailwindlabs/tailwindcss/pull/7664)) -- Correctly parse and prefix animation names with dots ([#7664](https://github.com/tailwindlabs/tailwindcss/pull/7664)) +- Correctly parse and prefix animation names with dots ([#7163](https://github.com/tailwindlabs/tailwindcss/pull/7163)) ### Changed