css-loader broken with modules and keyframes animation

Question

I am attempting to use keyframe animations in a react app which is using css-modules and a webpack build system.

Simplest example that reproduces the problem:

.confirmRemove {
  animation: 150ms appear ease-in;
}
@keyframes appear { ... }

Compiled to:

.comparators__confirmRemove__32JB0 {
  -webkit-animation: 150ms :local(appear) ease-in;
  animation: 150ms :local(appear) ease-in;
}

@keyframes comparators__appear__KTI43 { ... }

What it should be:

.comparators__confirmRemove__32JB0 {
  -webkit-animation: 150ms comparators__appear__KTI43 ease-in;
  animation: 150ms comparators__appear__KTI43 ease-in;
}

@keyframes comparators__appear__KTI43 { ... }

Things I have done

1. Attempted various usages of sprinkling :local around the place
2. Found an open issue request 539 but no action or responses in past week
3. Attempted versions 28.1 (latest), 27.3, and saw 26 doesn't work either
4. Contemplated giving up web development
5. Commented on pull request
6. Attempted all steps with issue 264

What I need

A known version of css-loader that works for keyframe animations and css modules or a work around until this is fixed by the authors.

Other Relevant Information

Node Version 7.9

Current relevant package.json:

"autoprefixer": "7.1.1",
    "css-loader": "0.28.1",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.1",
    "node-sass": "4.5.3",
    "sass-loader": "6.0.5",
    "style-loader": "0.18.1",
    "url-loader": "0.5.8",
    "webpack": "2.5.1",
    "webpack-bundle-analyzer": "2.8.2",
    "webpack-dev-middleware": "1.10.2",
    "webpack-hot-middleware": "2.18.0",
    "webpack-md5-hash": "0.0.5"

Current relevant webpack section:

{
        test: /(\.css|\.scss|\.sass)$/,
        use: [
          {loader: 'style-loader'},
          {
            loader:'css-loader',
            options:{
              sourceMap:true,
              modules: true,
              localIdentName: '[local]---[hash:base64:5]'
            }
          },
          {
            loader: 'postcss-loader',
            options:{
              sourceMap: true,
              plugins:()=>[
                autoprefixer()
              ]
            }
          },
          {
            loader: 'sass-loader',
            options:{
              sourceMap:true,
              includePaths: [path.resolve(__dirname, 'src', 'scss')]
            }
          }
        ]
      }

Answer 1

Without :global/:local pseudo selectors

@keyframes appear { ... } //remains as is

Instead of using the shorthand property, try using

.confirmRemove {
    animation-duration: 150ms;
    animation-name: appear;
    animation-iteration-count: infinite; //if you need
    animation-timing-function: ease-in;
}

It worked for me.

Answer 2

You have to put the name of the animation first

# this
  animation: appear 150ms ease-in;

# not this
  animation: 150ms appear ease-in;

Your naming looks fine. I've seen a lot of errors around global naming and animation naming conflicts, but that doesn't seem to be your issue.