React-joyride: css-module causes issue with @keyframes

[shri3k]

Hi,
This is not an issue in this package but more of a heads-up to people who are using css-modules with modules turned on in their sass build. There is this issue which was raised that has particularly to do with how keyframes are named as global and get localized on compilation.

I bring this up because I spent good 3 hours trying to figure out why this pacakge wasn't working as it was supposed to.

My workaround for this was to copy all the keyframe settings from this package's scss and overwrite with :

@keyframes :global(joyride-tooltip) {
  0% {
    transform: scale(0.1);
  }

  100% {
    opacity: 1;
    transform: perspective(1px) scale(1);
  }
}

@keyframes :global(joyride-beacon-inner) {
  20% {
    opacity: 0.9;
  }

  90% {
    opacity: 0.7;
  }
}

@keyframes :global(joyride-beacon-outer){
  0% {
    transform: scale(1);
  }

  45% {
    opacity: 0.7;
    transform: scale(0.75);
  }

  100% {
    opacity: 0.9;
    transform: scale(1);
  }
}

as mentioned by @eriklharper in the previous mentioned issue.

Also, thanks for this project. 😄

[gilbarbara]

Thanks for the heads up.

[dcworldwide]

@shri3k Thank you sir. You've saved me hours.

Is there a way to fix this? Feels like a future maintenance headache for teams that have to have a local copy of the sass styles.

[smrq]

For an example, react-datepicker provides a CSS Modules specific export, which just wraps their stuff in a :global block: https://github.com/Hacker0x01/react-datepicker/blob/v0.46.0/src/stylesheets/datepicker-cssmodules.scss

Perhaps doing the same in this project might be nice? The keyframes would have to be made global in this file as well, which is annoying, but probably better than consumers copying them over themselves.

[Sicria]

Is there a solution to this issue? It was closed but I think it was never really resolved.

[itpablo]

Hi!

I spent a couple of hours here trying to solve this too.

The @shri3k code serves me as a workaround, but the correct solution i think is something like mentioned by @smrq.

Thanks!