Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Correctly parse and prefix animation names with dots #7163

Merged
merged 8 commits into from Mar 1, 2022
Merged

Correctly parse and prefix animation names with dots #7163

merged 8 commits into from Mar 1, 2022

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