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

:global not working for animate.css #115

Closed
huarse opened this issue Feb 16, 2016 · 32 comments

Comments

@huarse
Copy link

commented Feb 16, 2016

I want to import animate.css as a global style, but it will add suffix on the class. Then I use :global to wrap the import, and it works on class names, but the @Keyframes still has suffix.

@huarse

This comment has been minimized.

Copy link
Author

commented Feb 16, 2016

I find that :global is not working for @Keyframes, not just on @import.
eg.

:global {
@keyframes abc {
    0% {opacity: 0}
    100% {opacity: 1}
}
}
@ticketdirectory

This comment has been minimized.

Copy link

commented Apr 10, 2016

Did you manage to overcome this issue @huarse ? We're experiencing the same.

@chapati23

This comment has been minimized.

Copy link

commented May 6, 2016

same here.

Input:

:global {
  @keyframes spin {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(359deg);
    }
  }
}

Expected Output:

@keyframes spin {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(359deg);
    }
}

Actual Output:

@keyframes src-___index__spin___uB5Zv {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(359deg);
    }
}
@chapati23

This comment has been minimized.

Copy link

commented May 10, 2016

not a fix but a workaround (or just the recommended way to do it after all?):
https://css-modules.github.io/webpack-demo/

so instead of the above i now do:

/* shared/animations.css */
@keyframes spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(359deg);}
}

.spin {
  animation: spin 2s infinite linear;
}

and then use it via:

/* componentX.css */
.spinner {
    composes spin from '../../....../shared/animation.css'
}

…which works ok. the thing i really dislike about this is the hard coupling and ugly traversing through the file-tree. change one hierarchy-level later on and have yourself an epicly painful pathfixing-session…

@eriklharper

This comment has been minimized.

Copy link

commented Jun 24, 2016

Wrapping the @Keyframes rule in a :global call worked for me:

@keyframes :global(zoomBounceIn) {
  0% {
    transform: scale(0);
  }
  50%{
    transform: scale(1.1);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

Compiles to:

@keyframes zoomBounceIn {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  70% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

👍

@derpoho

This comment has been minimized.

Copy link

commented Aug 12, 2016

Altough @eriklharper`s solution does compile, but i get a warning when using it with webpack 2 resolve-url-loader and sass-loader!

resolve-url-loader cannot operate: CSS error
 xxxxxxxx/src/components/App/App.scss:702:12: @keyframes missing name

Code used:

@keyframes :global(spinner) {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@eriklharper

This comment has been minimized.

Copy link

commented Aug 12, 2016

@derpoho sounds like you may have to adjust the order in which your compilations happen. CSS Modules needs to do its thing first before Sass can work on it.

@derpoho

This comment has been minimized.

Copy link

commented Aug 12, 2016

Tried that, i changed the order in any direction, the warning stays, just uncommenting the resolve-url-loader helped. But that`s not a long term solution ;)

  'style?sourceMap=true',
  'css?modules=true&importLoaders=true&localIdentName=[name]__[local]_[hash:base64:5]',
  // 'resolve-url',
  'sass?sourceMap=true',
@shahata

This comment has been minimized.

Copy link

commented Oct 6, 2016

+1

Is there a fix for this on the horizon?

@faceyspacey

This comment has been minimized.

Copy link

commented Dec 14, 2016

@eriklharper the only issue is you can't actually use the animation name, i.e. this won't work:

.myClass {
  animation: :global(myAnimation) 1s
}

myAnimation won't compile.

@eriklharper

This comment has been minimized.

Copy link

commented Dec 15, 2016

@faceyspacey does omitting the :global portion like this make it work?

.myClass {
  animation: myAnimation 1s
}

Because myAnimation is a global, you should just be able to name it directly in the call site of your myClass rule.

@farzer

This comment has been minimized.

Copy link

commented Jan 6, 2017

meet the same case

@NSLS

This comment has been minimized.

Copy link

commented Jan 30, 2017

Having a similar issue with css-loader combined with less-loader.
@keyframes :global(name) throws an error and there is no other way to make a global animation

@ioanlucut

This comment has been minimized.

Copy link

commented Feb 9, 2017

+1

@AshCoolman

This comment has been minimized.

Copy link

commented Feb 15, 2017

+1

@Azein

This comment has been minimized.

Copy link

commented Mar 6, 2017

In fact, I can't use any of approaches - not :global nor :local for animation names in my build process - either nothing good being compiled, or there is a "Module build failed - double colon" error. I still can add animation name as a string - like animation-name: 'checkbox__blink'; Where 'checkbox' is the ident__name. Yet this works only in chrome. I have no idea why this issue receives pretty little attention because it's kinda critical.

@eriklharper

This comment has been minimized.

Copy link

commented Mar 7, 2017

Considering the age of this thread, its a good idea for you to provide exact version numbers that you're working with @Azein

@Azein

This comment has been minimized.

Copy link

commented Mar 8, 2017

@eriklharper
I continued to research my issue and well, problem was caused by postcss-composes plugin - somehow it intercepted css-loader module processing and crashed the build because mentioined double colon error.
If anyone would encounter something alike - it is worth to check composing/imports plugins. Thanks everyone for attention =)

@TrySound

This comment has been minimized.

Copy link
Member

commented Jun 14, 2017

Keyframes behavior was separated and simplified
https://github.com/css-modules/postcss-icss-keyframes

@TrySound TrySound closed this Jun 14, 2017

@yolo2013

This comment has been minimized.

Copy link

commented Jun 17, 2017

I think this issue should be reopen. It is a bug. I will try to fix it.

@TrySound

This comment has been minimized.

Copy link
Member

commented Jun 17, 2017

@yolo2013 in new version :global/:local behavior was removed for keyframes. They are always local, until you disable keyframes plugin. Local identifier will be applied to animation name only if there's keyframes in the scope.

@Peterabsolon

This comment has been minimized.

Copy link

commented Jun 21, 2017

Anyone found a solution to have keyframes animation applied to global class? Shouldn't this issue be opened?

@TrySound

This comment has been minimized.

Copy link
Member

commented Jun 21, 2017

@Peterabsolon Do you have local enabled by default?

@Peterabsolon

This comment has been minimized.

Copy link

commented Jun 21, 2017

@TrySound Yes, I do. Thing is, I need to set the animation to a global class. I tried using "compose" css property but it doesn't work together.

@TrySound

This comment has been minimized.

Copy link
Member

commented Jun 21, 2017

@Peterabsolon Try to use postcss-icss-selectors and postcss-icss-keyframes, but disable modules in css-loader.

@kud

This comment has been minimized.

Copy link

commented Aug 3, 2017

I'm using a component called react-placeholder that I wanted to redefine its animation and it works like a charm:

// ~/components/placeholder/index.js

import "react-placeholder/lib/reactPlaceholder.css"
import styles from "./index.module.css"

import React from "react"
import ReactPlaceholder from 'react-placeholder'

{...}
/* index.module.css */
@keyframes :global(react-placeholder-pulse) {
  0% {
    opacity: .2;
  }

  50% {
    opacity: .7;
  }

  100% {
    opacity: .2;
  }
}
// webpack.config.js

{...}

       {
          test: /\.module\.css$/,
          use: [
            {
              loader: 'style-loader',
            },
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: '[path][name]--[local]___[hash:base64:5]',
                import: true,
                alias: {
                  '~': `${SRC_DIR}`
                }
              }
            },
            {
              loader: 'postcss-loader'
            }
          ]
        },

{...}
@nsaubi

This comment has been minimized.

Copy link

commented Oct 19, 2017

If anyone is still searching, this is working :

.connection_lost{
  color:red;
  :global{
    animation: 2s infinite alternate color_change;
  }
}

@keyframes :global(color_change) {
  from { color: rgba(200,0,0,0); }
  to { color: rgba(200,0,0,1); }
}
@sumthief

This comment has been minimized.

Copy link

commented Dec 8, 2017

Workaround with @keyframes :global(NAME-OF-YOUR-ANIMATION) works good for me. But before checking the result ensure that you moved out your @keyframes blocks out of wrapping :global scope.
It don't works for me

:global { 
 /**
  * Usual styles such as .selector { color: red; }
 /*

 @keyframes :global(ANIMATION-NAME) {
   // Keyframes description.
 }
}

Because all my keyframes was wrapped in extra { } in the result <style> tag.
It works for me

:global {
 /**
  * Only usual styles such as .selector { color: red; }
 /*
}
 @keyframes :global(ANIMATION-NAME) {
   // Keyframes description.
 }
@impressor615

This comment has been minimized.

Copy link

commented Jan 19, 2018

I am using semantic-ui for my project and also css-loader modules options too. This disable my semantic-ui default animation. Any solution for this? I think this problem is still going on.

@omichelsen

This comment has been minimized.

Copy link

commented Mar 14, 2018

For anyone using LESS this hack makes the above hack work:

@keyframes ~":global(ANIMATION-NAME)" {
   // Keyframes description.
 }
@mohammadalipak

This comment has been minimized.

Copy link

commented May 23, 2018

If you're looking for a plain css solution, I modified @nsaubi's solution above to:

.connection_lost{
  color:red;
}

.connection_lost :global{
  animation: 2s infinite alternate color_change;
}

@keyframes :global(color_change) {
  from { color: rgba(200,0,0,0); }
  to { color: rgba(200,0,0,1); }
}
@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
You can’t perform that action at this time.