question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animation keyframe name is not always transformed to local scope name

See original GitHub issue

Actual: The following input,

@keyframes slideIn {
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: 0%;
  }
}

.case-1 {
  animation: 2s slideIn;
}

.case-2 {
  animation: slideIn 2s;
}

when using the command, postcss input.css -u postcss-modules -o output.css

generates the following output

@keyframes _slideIn_1329k_1 {
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: 0%;
  }
}

._case-1_1329k_19 {
  animation: 2s :local(slideIn);
}

._case-2_1329k_27 {
  animation: _slideIn_1329k_1 2s;
}

Expected I would expect the keyframe name to be transformed in both cases.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:2
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
madyankincommented, Jan 28, 2021

@mischnic will be able to check on the weekend, thanks for pinging me

0reactions
mischniccommented, Jan 28, 2021

The linked PR is merged, any chance this package can be updated?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Animation keyframe name is not always transformed to local scope ...
I would expect the keyframe name to be transformed in both cases. The text was updated successfully, but these errors were encountered: ...
Read more >
animation-name - CSS: Cascading Style Sheets | MDN
The animation-name CSS property specifies the names of one or more @keyframes at-rules that describe the animation to apply to an element.
Read more >
Keyframe animations in CSS Modules - Gravity Department
Enforced scoping prevents the keyframes rule and class' animation name from matching in the output CSS, so the animation doesn't apply:.
Read more >
Not able to access the animate.css's animation keyframe ...
Otherwise, Sass Modules assumes bounceIn is locally scoped and will hash the animation name. .animateText :global { display: inline-block; ...
Read more >
CSS Animations Not Working? Try These Fixes - HubSpot Blog
Whether your animation isn't working as intended, or just isn't working ... Check that your @keyframes rule exists and that its name matches...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found