:local in "animation" when animation-name is placed after animation-delay

[faiwer]

• Operating System: Linux Mint
• Node Version: v12.13.0
• NPM Version: 6.12.0
• webpack Version: 4.41.5
• css-loader Version: 3.5.3

Expected Behavior

Outbound css-code doesn't contain :local as an animation name. Or it throws an error if this way of writing animation: %s is unsupported.

Actual Behavior

it provides animation: 3s :local(animationName) (in the final css-code)

Code

.a {
  /* it doens't work */
  animation: 3s animationName; 
}
.b {
  /* it works */
  animation: animationName 3s; 
}

@keyframes animationName {
  0% {
    background: white;
  }
  100% {
    background: red;
  }
}

How Do We Reproduce?

I did it here. But this demo works with parcel, not with webpack. So... I am not sure that I am creating an issue in a proper repo. My project where I faced it uses webpack and it works exactly the same. Should I create a bug there css-modules/css-modules instead?

So, how to reproduce:

• write a style with animation: 3s animationName
• it doesn't work
• replace it with animation: animationName 3s
• it works

[alexander-akait]

Yep, bug in CSS modules plugin, I will look at this in near future

[alexander-akait]

No bugs with webpack, it doesn't work on parcel (postcss-modules uses the old version of plugins and it was fixed a long time ago):

._style__a {
  animation: 3s :local(animationName);
}
._style__b {
  animation: _style__animationName 3s;
}

@keyframes _style__animationName {
  0% {
    background: white;
  }
  100% {
    background: red;
  }
}

[alexander-akait]

You can look at #1229, anyway please consider to update css-loader to latest version