ExtractTextPlugin: How do I avoid having CSS Keyframes renamed?

Question

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)

Source: css-loader issue on Github

I see the same effect when using ExtractTextPlugin with css-loader. Several different keyframes from different .scss files are all renamed to a. I've tried to disable the minimzation options discardUnused and mergeIdents, as described in the issue. I've even tried to disable minimizing entirely, but that didn't help.

Here's my configuration:

scss: {
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
                'css-loader?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. Would love to hear if anyone has any helpful tips.

Answer 1

Turns out that it was another plugin doing the minifaction. As soon as I tweaked the options for webpack-rtl-plugin to disable minification, the problem was solved.