Css-loader: [2.0] Animations broken with modules

[gpoitch]

• Operating System: macOS 10.14
• Node Version: 10.4.1
• NPM Version: 6.4.1
• webpack Version: 4.27.1
• css-loader Version: 2.0.1

Expected Behavior

CSS animation sytax works as expected

Actual Behavior

animation syntax becomes broken when transformed with css modules

Code

Give this input:

animation: slide-right 300ms forwards ease-out, fade-in 300ms forwards ease-out;

Produces this invalid output ('local' near the end) since version 2.0:

animation: slide-right__Fzt 300ms forwards ease-out, fade-in__1Ir 300ms :local(forwards) :local(ease-out);

css loader:

{
    loader: 'css-loader',
    options: {
      modules: true
    }
}

[pasiba]

Issue related to postcss-modules, solution now is to use [email protected]

[gpoitch]

Looks like it may be from this dependency:
https://github.com/css-modules/postcss-modules-local-by-default

There are a bunch of related tests, so maybe some specific combination with my example
https://github.com/css-modules/postcss-modules-local-by-default/blob/master/test.js#L175-L181

[alexander-akait]

Yep, problem in dependence (in postcss-modules-local-by-default), feel free to send a PR in this repo with fix and we upgrade deps, thanks. I can take care about this in next week, a lot of other issues

[kogai]

Same issue occurred at my environemnt too, And I'll attempt to fix it 👉
https://github.com/css-modules/postcss-modules-local-by-default/pull/5

[alexander-akait]

Fixed in https://github.com/webpack-contrib/css-loader/releases/tag/v2.0.2