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 · 34 comments
Closed

:global not working for animate.css #115

huarse opened this issue Feb 16, 2016 · 34 comments

Comments

@huarse
Copy link

@huarse huarse 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
Copy link
Author

@huarse huarse 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}
}
}

Loading

@ticketdirectory
Copy link

@ticketdirectory ticketdirectory commented Apr 10, 2016

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

Loading

@chapati23
Copy link

@chapati23 chapati23 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);
    }
}

Loading

@chapati23
Copy link

@chapati23 chapati23 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…

Loading

@eriklharper
Copy link

@eriklharper eriklharper 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); } }

👍

Loading

@derpoho
Copy link

@derpoho derpoho 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); }
}

Loading

@eriklharper
Copy link

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

Loading

@derpoho
Copy link

@derpoho derpoho 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',

Loading

@shahata
Copy link

@shahata shahata commented Oct 6, 2016

+1

Is there a fix for this on the horizon?

Loading

@faceyspacey
Copy link

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

Loading

@eriklharper
Copy link

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

Loading

@silent-tan
Copy link

@silent-tan silent-tan commented Jan 6, 2017

meet the same case

Loading

@ignatevdev
Copy link

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

Loading

@ioanlucut
Copy link

@ioanlucut ioanlucut commented Feb 9, 2017

+1

Loading

@AshCoolman
Copy link

@AshCoolman AshCoolman commented Feb 15, 2017

+1

Loading

@Azein
Copy link

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

Loading

@eriklharper
Copy link

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

Loading

@Azein
Copy link

@Azein Azein 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 =)

Loading

@TrySound
Copy link
Member

@TrySound TrySound commented Jun 14, 2017

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

Loading

@TrySound TrySound closed this Jun 14, 2017
@yolo2013
Copy link

@yolo2013 yolo2013 commented Jun 17, 2017

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

Loading

@TrySound
Copy link
Member

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

Loading

@Peterabsolon
Copy link

@Peterabsolon Peterabsolon commented Jun 21, 2017

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

Loading

@TrySound
Copy link
Member

@TrySound TrySound commented Jun 21, 2017

@Peterabsolon Do you have local enabled by default?

Loading

@Peterabsolon
Copy link

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

Loading

@TrySound
Copy link
Member

@TrySound TrySound commented Jun 21, 2017

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

Loading

@kud
Copy link

@kud kud 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'
            }
          ]
        },

{...}

Loading

@nsaubi
Copy link

@nsaubi nsaubi 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); }
}

Loading

@sumthief
Copy link

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

Loading

@seonghyeonkimm
Copy link

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

Loading

@omichelsen
Copy link

@omichelsen omichelsen commented Mar 14, 2018

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

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

Loading

@mohammadalipak
Copy link

@mohammadalipak mohammadalipak 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); }
}

Loading

@brendanfalkowski
Copy link

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

Loading

@antitoxic
Copy link

@antitoxic antitoxic commented Nov 27, 2020

@brendanfalkowski thanks for the article!

<selelctor> :global{
  animation: .... somename;
}

@keyframes :global(somename) {
 ...
}

seems to me to be the simplest solution for cross-file referencing.

Loading

@pascalduez
Copy link

@pascalduez pascalduez commented Nov 27, 2020

Found a workaround recently, I needed the opposite (get le local name).

@value fadeIn: :local(fadeIn);

:root {
  --animation: fadeIn 400ms;
}

@keyframes fadeIn { ... }

So it could totaly work the other way round.

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet