Using imported globally scoped keyframes inside local scope

[ersinakinci]

Is there any way to use globally scoped keyframes that are imported with @import inside of locally scoped CSS? Here's what I'm trying to do:

Input

@import "animate.css/animate.css";

.flip-in-appear.flip-in-appear-active {
  opacity: 1;
  animation: flipInX 10s ease;
}

Output

.src-styles-___index__cross-fade-appear___1B6mG.src-styles-___index__cross-fade-appear-active___h4rov {
  opacity: 1;
  animation: src-styles-___index__flipInX___1rs16 10s ease;
}

What I want is for my animation to use the globally-scoped flipInX, not src-styles-___index__flipInX___1rs16. It seems that css-loader assumes that any keyframes reference must also be locally scoped if the selector that contains the reference is also locally scoped.

[timse]

can you give more detail on this one? Are you using css-modules? have you tried something like animation: :global(flipInX) 10s ease;

[kumarharsh]

@timse specifying animation: :global(flipInX) 10s ease fails:

ERROR in ./~/css-loader?modules&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/css/shared/animations.css
Module build failed: Double colon (7:14)

  5 | }
  6 | .moving-stripes {
> 7 |   animation: :global(bg-move) 1.5s infinite linear;
    |              ^
  8 |   background-size: 200% 100%;
  9 |   background-repeat: repeat-x;

[michael-ciniawsky]

@kumarharsh Does just using the the global name not work ? (Exclude the e.g animations/ folder from css-loader?modules and load the them with a second rule instead). I don't think this is possible with CSSModules, it looks like compose, but that wouldn't do the job here either

[kumarharsh]

@michael-ciniawsky I've not tried global names, but local keyframe names are not being exported, which led me to investigate other variants, but I couldn't get it working at all.

I have a file called animations.css, which has this:

/* animations.css */
@keyframes bg-move {
  0% { background-position: 200% 0%; }
  100% { background-position: 0% 0%; }
}
.moving-stripes {
  animation: bg-move 1.5s infinite linear;
  background-size: 200% 100%;
  background-repeat: repeat-x;
}

First, I tried to composes: moving-stripes from '../animations.css' property,

/* Input.css */
@value moving-stripes from "../../animations.css";

.container:global(.is-focused) {
  composes: moving-stripes;
}

but since my class is composite (.container:global(.is-focused)), this doesn't work.

Then, I'm tried to import this bg-move keyframe directly:

/* Input.css */
@value bg-move from "../../animations.css";

.container:global(.is-focused) {
  animation: bg-move 1.5s infinite linear;
}

which doesn't work - bg-move's name is changed to be local to the Input.css file, even when I've not even defined bg-move in the Input.css file.

Then I tried turning bg-move into a global definition, but then I run into the problem I underlined earlier.

In the end, I just gave up and duplicated the keyframe definitions.

[alexander-akait]

Look #243 (comment), also duplicate #243

[brendanfalkowski]

For reference, I found this issue while debugging and documented several approaches here: https://gravitydept.com/blog/keyframe-animations-in-css-modules