{"id":29822932,"url":"https://github.com/ctxhou/postcss-hash-classname","last_synced_at":"2025-08-24T11:14:25.238Z","repository":{"id":57328070,"uuid":"48326051","full_name":"ctxhou/postcss-hash-classname","owner":"ctxhou","description":"PostCSS plugin to append hash string to your css class name.","archived":false,"fork":false,"pushed_at":"2017-11-21T04:58:19.000Z","size":35,"stargazers_count":60,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-08T22:06:55.754Z","etag":null,"topics":["classname","css","hash","postcss","postcss-hash"],"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/ctxhou.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-20T15:21:16.000Z","updated_at":"2025-03-17T13:46:54.000Z","dependencies_parsed_at":"2022-09-18T10:21:11.067Z","dependency_job_id":null,"html_url":"https://github.com/ctxhou/postcss-hash-classname","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ctxhou/postcss-hash-classname","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxhou%2Fpostcss-hash-classname","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxhou%2Fpostcss-hash-classname/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxhou%2Fpostcss-hash-classname/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxhou%2Fpostcss-hash-classname/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ctxhou","download_url":"https://codeload.github.com/ctxhou/postcss-hash-classname/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxhou%2Fpostcss-hash-classname/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267613885,"owners_count":24115709,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","hash","postcss","postcss-hash"],"created_at":"2025-07-29T01:12:17.795Z","updated_at":"2025-07-29T01:12:18.346Z","avatar_url":"https://github.com/ctxhou.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-hash-classname\n\n[![Build Status][ci-img]][ci]  ![david][david] ![download][download]\n\n**postcss-hash-classname** is a [PostCSS] plugin to append the hash string to your css class name.\n\nThis plugin is inspired by [extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin). I really like webpack and extract-text-webpack-plugin used to solve the css scope problem.\n\nBut at below cases, we can't require css file directly.\n\n* you want to do the server-side render with unique css classname\n* your projcet doesn't work with webpack\n* you want to package your projcet to a commonjs/amd/umd library which can't require `css` file.\n\nIf above is your use case, and you still want to keep the unique class name property, this plugin can do the trick!\n\n[PostCSS]: https://github.com/postcss/postcss\n[ci-img]:  https://travis-ci.org/ctxhou/postcss-hash-classname.svg\n[ci]:      https://travis-ci.org/ctxhou/postcss-hash-classname\n[david]:   https://david-dm.org/ctxhou/postcss-hash-classname.svg\n[download]:https://img.shields.io/npm/dm/postcss-hash-classname.svg?maxAge=2592000\n\n\n## Example\n\n**Input**\n\n```css\n.foo:not(.bar) {\n  ...\n}\n```\n\n**Output**\n```css\n.foo-7snm3d:not(.bar-8kb5qn) {\n  ...\n}\n```\n\nthen it would generate the corresponding `js/json` file.\n\n```js\nmodule.exports = {\n  \"foo\": \"foo-7snm3d\",\n  \"bar\": \"bar-8kb5qn\"\n}\n```\n\nso you can require this js file and set your class name from this object.\n\n## When to use?\n\nIf you want to build your own library but afraid your class name would conflict user's class name, it's time to use this package.\n\nAnd if you organize your project in the component way, postcss-hash-classname will generate corresponding js in each folder.\n\nCheck out the `example` folder to know more.\n\n## Installation\n\n```\n$ npm install postcss-hash-classname\n```\n\n## Usage\n\n#### gulp example\ncheck the `example` folder\n```js\n\nvar opts = {\n  hashType: 'md5',\n  digestType: 'base32',\n  maxLength: 6,\n  outputName: 'yoyo',\n  dist: './dest',\n  type: '.js'\n};\n\nvar processors = [\n  require('postcss-hash-classname')(opts)\n];\n\ngulp.task('default', function() {\n  return gulp.src('./**.css')\n    .pipe(postcss(processors))\n    .pipe(gulp.dest('./dest/'));\n});\n```\n\n### Options\n\n\n#### `hashType`\n\nHashing algorithm used when hashing classnames and source files' paths.\n\nDefault: `\"md5\"`\n\nValue: `\"sha1\"`, `\"md5\"`, `\"sha256\"`, `\"sha512\"`\n\n\n#### `digestType`\n\nHash output format.\n\nDefault: `\"base32\"`\n\nAllowed values: `\"hex\"`, `\"base26\"`, `\"base32\"`, `\"base36\"`, `\"base49\"`, `\"base52\"`, `\"base58\"`, `\"base62\"`, `\"base64\"`\n\n\n#### `maxLength`\n\nHash output max length.\n\nDefault: `6`\n\nAllowed values: maxLength the maximum length in chars (See [loader-utils.getHashDigest](https://github.com/webpack/loader-utils#gethashdigest) for reference)\n\n\n#### `classnameFormat`\n\nUsed to set the output format of your classname.\n\nDefault: `[classname]-[hash]`\n\nAllowed values:\n\n* Explicit value: `\"my-classname\"`\n\n` .A, .b { ... } ` =\u003e ` .myclassname, .my-classname { ... } `\n\n* Template value: `\"myclass-[classname]-[hash]\"`\n\n` .A, .b { ... } ` =\u003e ` .myclass-A-425tvq, .myclass-b-5gbwsr { ... } `\n\n  Template words supported: `\"classname\"`, `\"hash\"`, `\"classnamehash\"`, `\"sourcepathash\"`\n\n* Callback function (gets passed original classname and source file's path): `(classname, sourcePath) =\u003e { return path.parse(sourcePath).name + '-' + classname; }`\n\nfoo.css: ` .A, .b { ... } ` =\u003e ` .foo.-A, .foo-b { ... } `\n\nbar.css:` .A, .b { ... } ` =\u003e ` .bar-A, .bar-b { ... } `\n\n\n### `output`\n\nDefines output file's path.\n\nDefault: `none` (if not set, will be constructed from options `dist`, `outputName` and `type`)\n\nAllowed values:\n\n* Explicit value: `\"./style.js\"`\n\n`./css/style.css` =\u003e `./style.js`\n\n* Template value: `\"[dir]/[name]-output.json\"`\n\n`./css/style.css` =\u003e `./css/style-output.json`\n\n  Template words supported: `\"root\"`, `\"dir\"`, `\"base\"`, `\"ext\"`, `\"name\"` (See [path.parse()](https://nodejs.org/api/path.html) for reference)\n\n* Callback function (gets passed source file's path): `(sourcePath) =\u003e { return Math.round(1000*Math.random()) + '.js'; }`\n\n`./css/style.css` =\u003e `./114.js`\n\n\n#### `dist`\n\nDefines output file's target directory. Used only is `output` option empty.\n\nDefault: Same path as source file's\n\nAllowed values:\n\n* Explicit value: `\"./processed-styles\"`\n\n`./css/style.css` =\u003e `./processed-styles/style.js`\n\n* Template value: `\"[dir]/processed-styles\"`\n\n`./css/style.css` =\u003e `./css/processed-styles/style.js`\n\n  Template words supported: `\"root\"`, `\"dir\"`, `\"base\"`, `\"ext\"`, `\"name\"` (See [path.parse()](https://nodejs.org/api/path.html) for reference)\n\n* Callback function (gets passed source file's path): `(sourcePath) =\u003e { return sourcePath + '/processed-styles'; }`\n\n`./css/style.css` =\u003e `./css/processed-styles/style.js`\n\n\n#### `outputName`\n\nDefines output file's filename. Used only is `output` option empty.\n\nDefault: `\"style\"`\n\nAllowed values:\n\n* Explicit value: `\"my-style\"`\n\n`./css/style.css` =\u003e `./my-style.js`\n\n* Template value: `\"[name]-processed\"`\n\n`./css/style.css` =\u003e `./style-processed.js`\n\n  Template words supported: `\"root\"`, `\"dir\"`, `\"base\"`, `\"ext\"`, `\"name\"` (See [path.parse()](https://nodejs.org/api/path.html) for reference)\n\n* Callback function (gets passed source file's path): `(sourcePath) =\u003e { return Math.round(1000*Math.random()); }`\n\n`./css/style.css` =\u003e `./984.js`\n\n\n\n#### `type`\n\nDefines output file's extension - `\".js\"` and `\".json\"` supported. Used only is `output` option empty.\n\nDefault: `\".js\"`\n\nAllowed values:\n\n* Explicit value: `\".json\"`\n\n`./css/style.css` =\u003e `./style.json`\n\n* Template value: `\"[ext].js\"`\n\n`./css/style.css` =\u003e `./style.css.js`\n\n  Template words supported: `\"root\"`, `\"dir\"`, `\"base\"`, `\"ext\"`, `\"name\"` (See [path.parse()](https://nodejs.org/api/path.html) for reference)\n\n* Callback function (gets passed source file's path): `(sourcePath) =\u003e { return Math.round(1000*Math.random()) + '.js'; }`\n\n`./css/style.css` =\u003e `./style.984.js`\n\n\n## Contributors\n\n* ofzza([@ofzza](https://github.com/ofzza))\n\n\n## License\n\nMIT [@ctxhou](github.com/ctxhou)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctxhou%2Fpostcss-hash-classname","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctxhou%2Fpostcss-hash-classname","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctxhou%2Fpostcss-hash-classname/lists"}