webpack-cssmap-plugin

Create map for CSS class names from css-loader.

The motivation

css-loader :local is the amasing tool but it has a problem with classic E2E tests. The traditional way is to build test version of application with readable local class names using localIdentName. The webpack-cssmap-plugin allows to create the JSON file with mapping between original and compiled class names.

The usage

Just replace original css-loader with WebpackCssMapPlugin.CssLoader in your webpack-config.js and add WebpackCssMapPlugin plugin.

const WebpackCssMapPlugin = require('webpack-cssmap-plugin');

module.exports = {
    //...
    module: {
        rules: [{
            test: /.css$/,
            use: [
                "style-loader",
                WebpackCssMapPlugin.CssLoader,
            ]
        }]
    },
    plugins: [
        //...
        new WebpackCssMapPlugin({
          path: 'css-map.json',
        }),
    ],
}

Webpack will create JSON file with format

{
    "path/to/css":{
        "local-class-name":"compiled-class-name"
    }
}

This file could be used in your E2E tests code to build selectors

this.driver.findElement(
    By.css(`.${cssMap["path/to/css"]["local-class-name"]}`)
)