Breaks when using `animation` and `@keyframes`

[luxzeitlos]

If I do this:

.foo {
  animation: 0.8s bigsign, 1s wobblesign 1s infinite;
}

@keyframes foo {
  ...
}

I get this error:

Invalid CSS after "...animation: 0.8s": expected "}", was ":local(bigsign), 1s"

[buschtoens]

This is a problem with the underlying postcss plugin. I'm only on mobile, otherwise I'd link the issue.

Basically just use the animation-name property instead of or in addition to the shorthand and it'll work.

[luxzeitlos]

Thanks! I wasn't able to find something here, and I'm a bit confused where which issues are tracked. However I think it would be good for this issue to stay open so people find it. Maybe with the upstream label?

[buschtoens]

https://github.com/css-modules/css-modules/issues/141#issuecomment-243011699

.active {
  :global {
    animation: slideInFromRight 0.35s ease-in-out;
  }
}

https://github.com/css-modules/css-modules/issues/141#issuecomment-293092109

.fadein {
  animation-duration: 300ms;
  animation-name: fadein;
  animation-fill-mode: forwards;
}

@keyframes fadein {
  from {
    opacity: 0
  }
}

This is still very broken in upstream, even though the upstream issue is closed.

[BryanCrotaz]

Still very broken...

My original code was

  @keyframes rotate {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @mixin rotation {
    animation: rotate 2s linear infinite;
  }

Based on the advice above

  @keyframes rotate {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @mixin rotation {
    animation-name: rotate;
    animation: 2s linear infinite;
  }

Based on advice elsewhere that adding global will make it work...

:global {
  @keyframes rotate {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @mixin rotation {
    animation-name: rotate;
    animation: 2s linear infinite;
  }
}

ALL of them fail with syntax errors in the compiled css during build.

1. What's the correct workaround?
2. What's the link to the issue in the upstream? Where would I go to fix this?

[BryanCrotaz]

Requires the following in package.json (with yarn)

resolutions: {
  "postcss-modules-scope": "^3.0.0",
  "postcss": "^8.0.0",
  "broccoli-css-modules": "fpauser/broccoli-css-modules#migrate-to-postcss-8",
  "postcss-scss": "^3.0.0"
}