Animations not working, autoClose not working about react-toastify HOT 16 CLOSED

I have CSS modules in my project, and just copied all CSS from the module and added :global prefix to each one. I do not have animations nor autoClose working.

from react-toastify.

@emadow I don't have the issue at all. I'm also using chrome and safari latest version. Do you see any things when you open the developer tools ?

from react-toastify.

@fkhadra no errors in the console. Very puzzling.

from react-toastify.

Ack. Seems to be the result of how webpack was dealing with my imports -- the css @keyframes were not accessible globally.

from react-toastify.

Ow I'm glad you fixed it.

from react-toastify.

@emadow Can you please share your fix? I've stuck with this too.

from react-toastify.

I'm also having this issue

from react-toastify.

I have the same problem as @JustFly1984 , autoclose and animation are not working because I had to put the css rules under :global approach. Does someones have a fiz already?

from react-toastify.

Same problem for me, +1

from react-toastify.

Hello,

It would be nice to reproduce the bug via codesandbox. Anyone know how to do this ?

from react-toastify.

I could, but is it possible to update webpack configuration with codesandbox ?

from react-toastify.

Here the code : https://codesandbox.io/s/z252xzmvrl

CSS for toasts does not work on codesandbox because the webpack.config.js is not used (so the modules are not activated by default for css-loader). I don't know if it is possible to configure webpack on codesandbox...

In my project on my PC, the CSS of the toast box works well, but not the autoclose or animations.
If I remove modules option in css-loader and import globally like in your documentation, autoclose and animations work.

from react-toastify.

from react-toastify.

Me too facing the same issue. Does anyone know how to fix this webpack issue . The progressbar and auto close is not working

from react-toastify.

I was using Next.js with CSS Modules and faced a similar issue. I solved it by tweaking the CSS file as follows:

Initial:

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

Final (wrapping the animation name with :global()):

@keyframes :global(Toastify__slideInUp) {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

Source: css-modules#115

I had to manually add :global to all the keyframes, apart from a common :global for the other classes. I have made the edited stylesheet with all the :global's added in this gist so that you don't have to go through the same pain 😅

from react-toastify.

@fkhadra Can you please add this to the documentation? It might be helpful for people using CSS Modules.

from react-toastify.