Doesn't work with CSS modules

[mnpenner]

As far as I can tell, this doesn't seem to work with CSS modules. Input (LESS):

:local {
    .root {
        position: relative;
        background: url(../stylesheets/checkerboard.png); // https://github.com/webpack-contrib/css-loader/issues/74
    }
    
    .image1 {
        position: absolute;
        left: 0; // TODO: center the images instead?
        top: 0;
    }
    
    .image2 {
        composes: image1;
        animation: fadeInOut 1s infinite;
    }


    @keyframes fadeInOut {
        0% {
            opacity: 1;
        }
        40% {
            opacity: 0;
        }
        50% {
            opacity: 0;
        }
        90% {
            opacity: 1;
        }
    }
}

Output:

.FaderDiff__root--1brCJ {
  position: relative;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAQ0lEQVRYw+3QsQlAIRBEQbUlsf9c/6/pLEG4QJN5+TKwdc6vZBujp7etPAoMBoPBYDD4fjUi0uO1fleDwWAwGAwGn9uOIwisc55KqAAAAABJRU5ErkJggg==);
}
.FaderDiff__image1--2oRQY {
  position: absolute;
  left: 0;
  top: 0;
}
.FaderDiff__image2--bHxFu {
  -webkit-animation: FaderDiff____FaderDiff_less__fadeInOut--1naMI 1s infinite;
          animation: FaderDiff____FaderDiff_less__fadeInOut--1naMI 1s infinite;
}
@-webkit-keyframes __FaderDiff_less__fadeInOut {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
}
@keyframes __FaderDiff_less__fadeInOut {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
}

I think it's transforming the keyframes name, but then CSS modules is transforming it again (but only inside .image2) which is the exact same bug we were reporting over here.

For reference, my webpack plugins are configured like so:

import Path from 'path';
import browsers from './browser_list';

const cssSourceMaps = false; // Always shows as line 1

export const cssLoader = {
    loader: 'css-loader',
    options: {
        sourceMap: cssSourceMaps,
        root: Path.resolve(__dirname, '..', 'public'),
        localIdentName: '[name]__[local]--[hash:base64:5]',
        importLoaders: 1, // https://github.com/webpack-contrib/css-loader#importloaders
        minimize: process.env.NODE_ENV === 'production',
    }
};

export const postCssLoader = {
    loader: 'postcss-loader',
    options: {
        sourceMap: cssSourceMaps ? 'inline' : false,
        plugins: () => [
            require('autoprefixer')({browsers}),
            require('postcss-icss-keyframes')(),
        ]
    }
};

export const lessLoader = {
    loader: 'less-loader',
    options: {
        sourceMap: cssSourceMaps, // https://github.com/webpack-contrib/less-loader#user-content-source-maps
        strictMath: true,
        strictUnits: true,
    }
};

export const cssLoaders = [cssLoader, postCssLoader];

[TrySound]

Yep. Because local/global blocks was removed.

[TrySound]

css-loader still has old stuff which can override this plugin changes.

[mnpenner]

@TrySound What do you mean "removed"? You mean the :global block is removed before postcss processes it, and therefor postcss-icss-keyframes can't remedy the situation? What's the solution then? I want both the class names and keyframes to be hashed.

[TrySound]

I meant global/local block was removed as behavior.
You can enable local by default using
postcss-icss-selectors and postcss-icss-keyframes
But css-loader?modules flag should be disabled.

[TrySound]

:local block here processed by old plugins (which are still enabled in css-loader).

[mnpenner]

@TrySound I don't want local by default, and modules is off by default. I don't understand. What are the exact settings for css-loader, less-loader and postcss-icss-keyframes I need to use to make this work? Could you maybe post an example of using this plugin in conjunction with LESS and locally-scoped classes?

[TrySound]

    :local .root {
        position: relative;
        background: url(../stylesheets/checkerboard.png); // https://github.com/webpack-contrib/css-loader/issues/74
    }
    
    :local .image1 {
        position: absolute;
        left: 0; // TODO: center the images instead?
        top: 0;
    }
    
    :local .image2 {
        composes: image1;
        animation: fadeInOut 1s infinite;
    }


    @keyframes fadeInOut {
        0% {
            opacity: 1;
        }
        40% {
            opacity: 0;
        }
        50% {
            opacity: 0;
        }
        90% {
            opacity: 1;
        }
    }

[mnpenner]

@TrySound I just tried it that way, still comes out exactly the same way as in my original post. But even if it hadn't, having to prefix each individual class with :local would defeat the benefit of LESS.

[TrySound]

@mnpenner I got it. Try to exclude keyframes from local block and consider they as always local (until different configuration)