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

Using imported globally scoped keyframes inside local scope #399

Closed
earksiinni opened this issue Jan 14, 2017 · 6 comments

Comments

@earksiinni
Copy link

commented Jan 14, 2017

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

This comment has been minimized.

Copy link

commented Jan 21, 2017

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

@kumarharsh

This comment has been minimized.

Copy link

commented Apr 3, 2017

@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

This comment has been minimized.

Copy link
Member

commented Apr 3, 2017

@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

This comment has been minimized.

Copy link

commented Apr 4, 2017

@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.

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Feb 15, 2018

Look #243 (comment), also duplicate #243

@brendanfalkowski

This comment has been minimized.

Copy link

commented Jul 12, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.