webpack-replace-class-names

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: 'bg-schema-2-1',
                        type: 'class'
                    }
                ]
                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 objects. If sensitive matcher/replacer, does not replace a class or id, you can force it ( the forced name has to be availbale in the matches array). Example: [ { find: 'bg-schema-2-1', type: 'class' } ]
restModulo	number	Each number of lines should be made a break
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 (with provided type: '.' for class and '#' for id on char 0), [ '.classNameToIgnore', '#idToIgnore' ].
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

forceReplace worker

If an class name or id not replaced, the reason could be an dynamic added class, for example:

# React snipped
#
# The variable 'color' (with the value 'bg-schema-2-1') 
# passed to a function and added at the end of an 
# className of JSX element. The variable color not 
# available inside the className attribute as readable string, 
# so we have to find the plain value inside the source code

var text = data.text, link = data.link, color = data.color;
    return (react_1.default.createElement("span", { className: "color-white-block " + color },

# The variable color passed as argument (object) to a function as plain value
_ColorBox_1.default({
    text: Translations_1.default('pdf.product.protein') + " " + this.itemFromDb.calculation.protein + "g",
    color: 'bg-schema-2-1'
}),

So its not possible to replace a variable content. We have to replace he plain string inside the generated bundle file. Its the way, how the 'forceReplace' work.

Ignore match worker

The ignore list, includes all names that should be ignored to replace (Whitelist). If the provided string has on char position 0 of the string an '.' then its detected as class, if an '#' then its detected as an id.

Maintainer

David Janitzek