Minify Classnames

getScopedName.js

const incstr = require('incstr');

const createUniqueIdGenerator = () => {
  const uniqIds = {};
  const generateNextId = incstr.idGenerator({
    alphabet: 'abcefghijklmnopqrstuvwxyzABCEFGHJKLMNOPQRSTUVWXYZ',
  });

  return name => {
    if (!uniqIds[name]) {
      uniqIds[name] = generateNextId();
    }
    return uniqIds[name];
  };
};

const localNameIdGenerator = createUniqueIdGenerator();
const componentNameIdGenerator = createUniqueIdGenerator();

module.exports = (localName, resourcePath) => {
  const componentName = resourcePath.split('/').slice(-2, -1)[0];
  const localId = localNameIdGenerator(localName);
  const componentId = componentNameIdGenerator(componentName);
  return `${componentId}_${localId}`;
};

package.json

Add incstr npm pakage to generate sequential string ids in node.js or browser

"dependencies": {
    "incstr": "^1.2.3",
},

webpack.config.js

//Imported custom module

const getScopedName = require('./getScopedName');



//Modified existing CRA webpack config css module code 
{
   test: cssModuleRegex,
   use: getStyleLoaders({
   importLoaders: 1,
   sourceMap: isEnvProduction && shouldUseSourceMap,
   modules: true,
   getLocalIdent: getCSSModuleLocalIdent,
 }),
},

//to

// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
    test: cssModuleRegex,
    use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
    modules: true,
    ...(isEnvProduction && {
        getLocalIdent: (context, localIdentName, localName) =>
        getScopedName(localName, context.resourcePath),
    }),
    }),
},