css-loader 0.15.1 breaks keyframe animations

[mareksuscak]

For me it either:

1. Removes "unused" keyframe animations (when keyframe animation is defined in one file but is used in another file only - it just guesses that this keyframes are not used anywhere)
2. If two animations are defined in one file, this file is then included in another two files, animations get the same single letter name a which breaks one of them with lower priority (because the latter overrides the former) - see more details here.

[ben-eb]

I wrote this behaviour, which is best when all of your CSS is defined in single file. Both of these transformations can be disabled; the first by cssnano.options.unused and the second by cssnano.options.idents.

[Kelderic]

Just in case anyone stumbles across this, it's discardUnused, not unused, in recent versions.

[Cevantime]

And, if i'm not mistaken, it's mergeIdents and not idents anymore !

[ben-eb]

Yeah, we deprecated these in v2.5.0 (and removed in v3.0.0)

• https://github.com/ben-eb/cssnano/releases/tag/v2.5.0
• https://github.com/ben-eb/cssnano/releases/tag/v3.0.0

[burtyish]

If two animations are defined in one file, this file is then included in another two files, animations get the same single letter name a which breaks one of them with lower priority (because the latter overrides the former) - see more details here.

I see this effect when I'm using css-loader for ExtractTextPlugin. I've tried to disable the options mentioned above. I've even tried to disable minimizing entirely, but the keyframe names are still renamed to a.

Here's my configuration:

    scss: {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    'css-loader?sourceMap&minimize=false',
/* I've tried these too:
                    'css-loader?sourceMap&minimize.discardUnused=false&minimize.mergeIdents=false',
                    'css-loader?-minimize',
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: {                            
                                discardUnused: false,
                                mergeIdents: false,
                            }
                       }
                    }
*/
                    'sass-loader'
                ]
            })
    }

• webpack 2.7.0
• css-loader: 0.28.7
• extract-text-webpack-plugin: 2.1.0

I'm not sure if the problem lies in css-loader or in the way ExtractTextPlugin uses it.
I've been working on this problem for hours now.
Would love to hear if anyone has any helpful tips.