{"id":19118478,"url":"https://github.com/shoonia/mini-css-class-name","last_synced_at":"2025-05-05T04:14:47.162Z","repository":{"id":49407585,"uuid":"172137007","full_name":"shoonia/mini-css-class-name","owner":"shoonia","description":"Minimum size unique CSS class names generator","archived":false,"fork":false,"pushed_at":"2024-05-04T15:41:20.000Z","size":633,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-05T04:14:37.542Z","etag":null,"topics":["classname","css-modules","loader","minify"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shoonia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-22T21:28:26.000Z","updated_at":"2024-05-04T15:41:24.000Z","dependencies_parsed_at":"2023-02-14T03:45:44.450Z","dependency_job_id":"f3731601-1b04-4263-a20b-ee32484d5627","html_url":"https://github.com/shoonia/mini-css-class-name","commit_stats":{"total_commits":109,"total_committers":3,"mean_commits":"36.333333333333336","dds":0.4678899082568807,"last_synced_commit":"42937bc87492b196e9d78fed4720082271defc75"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shoonia%2Fmini-css-class-name","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shoonia%2Fmini-css-class-name/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shoonia%2Fmini-css-class-name/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shoonia%2Fmini-css-class-name/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shoonia","download_url":"https://codeload.github.com/shoonia/mini-css-class-name/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252436586,"owners_count":21747472,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["classname","css-modules","loader","minify"],"created_at":"2024-11-09T05:06:26.535Z","updated_at":"2025-05-05T04:14:47.147Z","avatar_url":"https://github.com/shoonia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mini-css-class-name\n\n[![CI](https://github.com/shoonia/mini-css-class-name/actions/workflows/ci.yml/badge.svg)](https://github.com/shoonia/mini-css-class-name/actions/workflows/ci.yml)\n[![npm version](https://img.shields.io/npm/v/mini-css-class-name.svg)](https://www.npmjs.com/package/mini-css-class-name)\n\nMinimum size unique CSS class names generator.\nIt can be used with [Webpack](#css-modules), [Gatsby](https://github.com/shoonia/gatsby-plugin-mini-css-class-name#readme) and [PostCSS](#postcss-modules) ecosystems.\n\n## Install\n\n```bash\nnpm i mini-css-class-name --save-dev\n# or\nyarn add mini-css-class-name -D\n```\n\n## How to use\n\n```js\nconst miniCssClassName = require('mini-css-class-name');\n\nconst generate = miniCssClassName({\n  prefix: 'x__',\n  suffix: '--y',\n});\n\ngenerate(); // x__a--y\ngenerate(); // x__b--y\ngenerate(); // x__c--y\n```\n\n## Reset method\n\n```js\nconst miniCssClassName = require('mini-css-class-name');\n\nconst generate = miniCssClassName();\n\ngenerate(); // a\ngenerate(); // b\ngenerate(); // c\n\ngenerate.reset();\n\ngenerate(); // a\n```\n\n## Exclude Pattern\n\nYou can use a regular expression to exclude any characters from the template string.\n\n```js\n// remove underscore and dash\nconst generate = miniCssClassName({ excludePattern: /[_-]/g });\n\n// keep only alphabet characters\nconst generateABC = miniCssClassName({ excludePattern: /[^a-z]/gi });\n```\n\nDefault template string\n\n```js\n'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-0123456789';\n```\n\n## CSS Modules\n\n### css-loader\n\nUse with the Webpack [css-loader](https://github.com/webpack-contrib/css-loader#css-loader) resolver\n\n```js\nconst createLocalIdent = require('mini-css-class-name/css-loader');\n```\n\nThere are two ways to plugin it's depending on `css-loader` version.\n\n#### css-loader \u003c= 1.x || ~2.x\n\n```js\nconst createLocalIdent = require('mini-css-class-name/css-loader');\n\nconst localIndent = createLocalIdent(/* options */);\n\nmodule.exports = {\n\n  // webpack config ...\n\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        loader: 'css-loader',\n        options: {\n          modules: true,\n          getLocalIdent: localIndent,\n        },\n      },\n    ],\n  },\n};\n```\n\n#### css-loader \u003e= 3.0.0\n\n```js\nconst createLocalIdent = require('mini-css-class-name/css-loader');\n\nconst localIndent = createLocalIdent(/* options */);\n\nmodule.exports = {\n\n  // webpack config ...\n\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        loader: 'css-loader',\n        options: {\n          modules: {\n            getLocalIdent: localIndent,\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n#### Development and Production Environments\n\nSetup of minimizing the class names only in the `production` build. In the `development` environment, you may use a human-readable class name template. It will be more easy to debug your projects.\n\n```js\nconst createLocalIdent = require('mini-css-class-name/css-loader');\n\nconst localIndent = createLocalIdent(/* options */);\n\nmodule.exports = {\n\n  // webpack config ...\n\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        loader: 'css-loader',\n        options: {\n          modules: process.env.NODE_ENV === 'production'\n            ? { getLocalIdent: localIndent }\n            : { localIdentName: '[path][name]__[local]--[hash:base64:5]' },\n        },\n      },\n    ],\n  },\n};\n```\n\n### postcss-modules\n\nUse minimazer with the PostCSS [postcss-modules](https://github.com/madyankin/postcss-modules#postcss-modules) plugin\n\n```js\nconst generateScopedName = require('mini-css-class-name/postcss-modules');\n```\n\n**Example**\n\n```js\nconst { readFile } = require('node:fs/promises');\nconst postcss = require('postcss');\nconst postcssModules = require('postcss-modules');\nconst generateScopedName = require('mini-css-class-name/postcss-modules');\n\nconst getStyles = async () =\u003e {\n  const path = './styles.css';\n  const source = await readFile(path, 'utf8');\n\n  let json;\n\n  const { css } = await postcss([\n    postcssModules({\n      getJSON(_, jsonData) {\n        json = jsonData;\n      },\n      generateScopedName: generateScopedName(/* options */),\n    }),\n  ]).process(source, { from: path });\n\n  return { json, css };\n};\n```\n\n## Gatsby\n\nYou also can use it with [Gatsby](https://www.gatsbyjs.org/docs/add-custom-webpack-config/) v2, v3, v4 or v5\n\n\u003e [gatsby-plugin-mini-css-class-name](https://github.com/shoonia/gatsby-plugin-mini-css-class-name#readme)\n\n## Options\n\n|    Name          |   Type     | Default | Description |\n|:----------------:|:----------:|:-------:|:-----------:|\n| **prefix**       | `{String}` |  `''`   | A custom prefix will be added to each class name\n| **suffix**       | `{String}` |  `''`   | A custom suffix will be added to each class name\n|**excludePattern**| `{RegExp}` | `null`  | A regular expression for removing characters\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshoonia%2Fmini-css-class-name","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshoonia%2Fmini-css-class-name","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshoonia%2Fmini-css-class-name/lists"}