Webpack Replace Class Names

Replace all CSS class name's and id's based on given match array.

Example how to use it in webpack

const WebpackReplaceClassNames = require('webpack-replace-class-names');
const matchesFile = `${__dirname}/extracted-names-for-js`;

if(!fs.existsSync(matchesFile))
{
    throw new Error(`The required file cannot be found: ${matchesFile}`);
}

let matches = [];
try{
    matches = fs.readFileSync(matchesFile, 'UTF-8');
    matches = JSON.parse(matches);
}
catch(e)
{
    throw new Error(e);
}

const config = {
    resolve: {
        extensions: ['.ts', '.js', '.tsx'],
    },
    cache: ....,
    entry: ...,
    output: ....,
    module: {
        rules: [
            ....
        ]
    },
    externals: {....},
    plugins: [
        ....
        new WebpackReplaceClassNames(
            {
                matches,
                restModulo: 10000,
                restTime: 200, 
                displayResult: false,
                ignore: [],
                attributes: [],
                forceReplace: [
                    {
                        find: '_App',
                        type: 'id'
                    },
                    {
                        find: '_Generator',
                        type: 'id'
                    }
                ],
                logger: {
                    logging: true,
                    prefix: 'Replace',
                    displayFilename: true,
                    displayPercentage: true,
                    type: 'bar',
                    barBg: 'bgCyan'
                },
            }
        )
    ]
};

Example of HTML file content before replacement

<div class="px-1">
    <div class="row">
        <div class="col-6 col-lg-3 flex">
            <div class="card box-shadow-transparent w-100 bg-transparent">
                <div class="card-header">
                    <h1 class="card-title text-green font-xl">service</h1>
                </div>
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover text-nowrap w-100">
                        <tbody>
                            <tr>
                                <td class="border-none py-0"></td>
                            </tr>
                            <tr>
                                <td class="border-none py-0"></td>
                            </tr>
                            <tr>
                                <td class="border-none py-0"></td>
                            </tr>
                            <tr>
                                <td class="border-none py-0"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Example of HTML file content after replacement

<div class="k189">
    <div class="j191">
        <div class="y182 d141 w185">
            <div class="c186 w195 w-100 d67">
                <div class="f103">
                    <h1 class="g118 m122 i198">service</h1>
                </div>
                <div class="s129 o49 f192">
                    <table class="c183 s102 b104 w-100">
                        <tbody>
                            <tr>
                                <td class="m199 c189"></td>
                            </tr>
                            <tr>
                                <td class="m199 c189"></td>
                            </tr>
                            <tr>
                                <td class="m199 c189"></td>
                            </tr>
                            <tr>
                                <td class="m199 c189"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Limitations

Only Modules there are generated from the base path (not node_modules) are replaced. Modules imported from node_modules are not replaced. External module names has to be in the "ignore" list.

This module are based on the 2 other modules

Extract class and id names from css file

extract-css-names

Replace class and id names in css files based on the "extract-css-names" module.

replace-css-names

WebpackReplaceClassNames options

| Option | type | Description
| --------------- | ------- | ------------- | | matches | array | Array of objects: [ { find: string; replace: string; type: string;}, ... ] | attributes | array | Array of strings/atrribute names to replace. Default [ 'className', 'id' ] | forceReplace | array | Array of strings. If sensitive match, does not replace a class or id, you can force it ( the forced name has to be availbale in the matches array). Structure [ { find: string; type: string } ] | restModulo | number | Each number of lines should be made a break | restTime | number | Duration of the break in ms | displayResult | boolean | Display the replace result in the terminal | ignore | array | Ignore names to replace | logger | object | Logger options

WebpackReplaceClassNames logger options

| Option | type | Description
| ------------------- | ------- | ------------- | | logging | boolean | Display current process | prefix | string | Prefix on the logging line | displayFilename | boolean | Display current processed filename (filename extracted from path) | displayPercentage | boolean | Display current percentage value | type | string | Process animation type. Available types: 'spinner', 'bar', 'dots', 'dots2', 'arc', 'line' | barBg | string | If the animation type is bar, then set the bar's background-color. Background colors are based on the chalk module

Maintainer

David Janitzek