css module keyframes not working properly when using special characters

[william-will-angi]

Bug report

CSS modules are not being processed properly when there are special characters in the animation name. For example:

@-webkit-keyframes \@bounce {
  0%, 100% {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
            animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
            animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

@keyframes \@bounce {
  0%, 100% {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
            animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
            animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

.container {
  -webkit-animation: \@bounce 1s infinite;
  animation: \@bounce 1s infinite;
}

Actual Behavior

Keyframes do not work when applied with a special character

Expected Behavior

Keyframes defined with special characters should be respected within css modules.
With respect to my repro, localhost:3000/ and localhost:3000/home2 should both produce the same visual result

How Do We Reproduce?

Steps to reproduce:

1. Pull down the following repo: https://github.com/william-will-angi/css-loader-repro/tree/master/css-loader-repro
2. npm i and npm run dev
3. Navigate to localhost:3000/ and notice there is no animation
4. Navigate to localhost:3000/home2/ and notice the animation is there

In this app, both pages have the same styles, with the exception of localhost:3000/ having their keyframes & class names prefixed with the special character @.

Please paste the results of npx webpack-cli info here, and mention other relevant information

Results:

  System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 36.91 MB / 16.00 GB
  Binaries:
    Node: 16.14.1 - ~/.nvm/versions/node/v16.14.1/bin/node
    Yarn: 1.22.18 - ~/.yvm/shim/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.1/bin/npm
  Browsers:
    Brave Browser: 98.1.35.104
    Chrome: 99.0.4844.74
    Firefox: 94.0.1
    Safari: 15.4

[alexander-akait]

Yep, bug, feel free to send a fix here https://github.com/css-modules/postcss-modules-local-by-default

[william-will-angi]

Perfect, I will take a look at that! Thank you for the quick response!

[william-will-angi]

@alexander-akait I put up an PR here: css-modules/postcss-modules-local-by-default#42

Would you mind taking a look when you get a chance? I'm also hoping this MR can be backported to 3.x if you're open to it.

[alexander-akait]

Thanks, I will look at this in near future