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

Don't remove keyframe stops when using important utilities #12639

Merged
merged 3 commits into from Dec 21, 2023

Conversation

thecrypticace
Copy link
Contributor

@thecrypticace thecrypticace commented Dec 21, 2023

Fixes #12623

Before:

@keyframes pulse {
  {
    opacity: .5 !important;
  }
}

.\!animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

After:

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.\!animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

There's two differences here:

  1. We no longer replace the keyframe stops with an empty string — this snuck through because the assumption that all rules are "style" rules is incorrect. This meant that we were looking for classes in this rule when there can never be any.
  2. We no longer mark declarations of keyframes as important — browsers ignore these declarations.

@thecrypticace thecrypticace merged commit b048a0d into master Dec 21, 2023
10 checks passed
@thecrypticace thecrypticace deleted the fix/keyframes-important branch December 21, 2023 17:17
thecrypticace added a commit that referenced this pull request Jan 3, 2024
* Don't remove keyframe stops when using important utilities

* Fix test

* fix linting
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.

important modifier on animation breaks keyframes
1 participant