Webpack5 and CSS Modules config to enable human readable stable CSS class names

webpack-css-module.js

{
    loader: "css-loader",
    options: {
        modules: {
            getLocalIdent: (loaderContext, _localIdentName, localName, options) => {
                const relativeResourcePath = path.relative(
                    options.context,
                    loaderContext.resourcePath
                );
                // no need for /src and and .module.scss in
                const pathInfo = relativeResourcePath
                    .replace(/^src\//, "")
                    .replace(/\.module\.s?css/, "");

                const localNameRegex = new RegExp(
                    `(^|/)${localName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`,
                    "i"
                );

                // no need for `fest-Comp1-comp1` classes
                // replace those with `fest-Comp1`
                if (pathInfo.match(localNameRegex)) return `fest-${pathInfo}`;
                return `fest-${pathInfo}-${localName}`;
            },
        },
    },
},