Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Minify Classnames
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}`;
};
Add incstr npm pakage to generate sequential string ids in node.js or browser
"dependencies": {
"incstr": "^1.2.3",
},
//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),
}),
}),
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment