Skip to content

Conversation

@vitorrd
Copy link
Contributor

@vitorrd vitorrd commented Jan 22, 2022

Fixes #7149.

Adds prefix alone to animation names, such that the parser does not run on the rest of the identifier, possibly damaging class names like "zoom-1.5".
Although tests still pass, care must be taken as this effectively disables previous [albeit similar] behavior.

@vitorrd vitorrd changed the title Add prefix alone to animation names. Fixes #7149. Add prefix alone to animation names. Jan 22, 2022
@vitorrd vitorrd changed the title Add prefix alone to animation names. Add prefix alone to animation names on core plugin. Jan 22, 2022
@adamwathan
Copy link
Member

Hey thanks! I'm having a bit of a hard time seeing the issue really clearly though — there's gotta be a test we could write that would fail without this being merged that would make it clearer?

Is the issue just that things break when you include a . in an animation name? If so we should be able to add a test for that.

@thecrypticace thecrypticace self-assigned this Feb 28, 2022
@thecrypticace
Copy link
Contributor

The issue is that it would generate the following invalid CSS as the dot has to be escaped and not the 5:

@keyframes zoom-1.\35 {
  to {
    transform: scale(1.5);
  }
}
.animate-zoom-1\.5 {
  animation: zoom-1.\35 2s;
}

Additionally, when a prefix was configured the behavior was even weirder:

@keyframes tw-zoom-1.tw-5 {
  to {
    transform: scale(1.5);
  }
}
.tw-animate-zoom-1\.5 {
  animation: tw-zoom-1.tw-5 2s;
}

@thecrypticace thecrypticace changed the title Add prefix alone to animation names on core plugin. Correctly parse and prefix animation names with dots Mar 1, 2022
@thecrypticace thecrypticace merged commit 7df3d93 into tailwindlabs:master Mar 1, 2022
@thecrypticace
Copy link
Contributor

Appreciate you taking the time to figure this one out! 🎉

@vitorrd vitorrd deleted the fix/animation-core-plugin branch March 2, 2022 20:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Wrong keyframe keys when generationg CSS classes with JS

3 participants