{"id":20061,"library":"generic-names","title":"generic-names","description":"Helper for building generic names with pattern interpolation, similar to webpack's css-loader. Stable v4.0.0 (latest) uses loader-utils and xxhash64 by default for hashing. Generates scoped class names for CSS Modules, commonly used with postcss-modules-scope. Designed to produce consistent, platform-independent names (fixed in v2.0.1). Breaking changes in v3 and v4 altered hash output — consumers must ensure matching versions with css-loader to avoid class name mismatches.","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/css-modules/generic-names","tags":["javascript","css-modules","postcss-modules-scope","webpack","typescript"],"install":[{"cmd":"npm install generic-names","lang":"bash","label":"npm"},{"cmd":"yarn add generic-names","lang":"bash","label":"yarn"},{"cmd":"pnpm add generic-names","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides interpolateName for pattern generation (e.g., [name], [hash], [contenthash]).","package":"loader-utils","optional":false}],"imports":[{"note":"The package exports a default function, not a named export. TypeScript types expect default import.","wrong":"import { generate } from 'generic-names'","symbol":"default","correct":"import generate from 'generic-names'"},{"note":"CommonJS require returns the default function directly.","wrong":"const { generate } = require('generic-names')","symbol":"default (require)","correct":"const generate = require('generic-names')"},{"note":"Options type is exported as a named type, not a value.","wrong":"import { GenericNamesOptions } from 'generic-names'","symbol":"type GenericNamesOptions","correct":"import type { GenericNamesOptions } from 'generic-names'"}],"quickstart":{"code":"import generate from 'generic-names';\n\nconst generateName = generate('[name]__[local]___[hash:base64:5]', {\n  context: process.cwd(),\n  hashPrefix: 'custom',\n});\n\nconst className = generateName('foo', '/case/source.css'); // 'source__foo___3mRq8'\nconsole.log(className);","lang":"typescript","description":"Shows how to import and use the default export to create a name generator, with pattern and options."},"warnings":[{"fix":"If you rely on stable hashes, pin to v3.x or explicitly configure hashFunction in loader-utils options.","message":"v4.0.0 updated loader-utils; xxhash64 is now the default for [hash] and [contenthash]. Existing names using these patterns will change.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Upgrade css-loader to >=4 to keep class names in sync.","message":"v3.0.0 replaced '+' with '\\x00' in generated names, causing new class name output, especially for hashed patterns.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"If using without postcss, explicitly set context: process.cwd() to retain old behavior.","message":"v2.0.0 changed default context from process.cwd() to postcss.cwd() when used with postcss-modules-scope. Also updated loader-utils from ^0.2.16 to ^1.1.0.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use the same major version of generic-names as the one bundled with your css-loader, or pin both.","message":"When using with css-loader, the version of generic-names must match the version used internally by css-loader to avoid class name mismatches.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"search_vec":"'alter':63 'avoid':76 'break':57 'build':6 'chang':58 'class':34,77 'common':39 'consist':49 'consum':66 'css':17,37,73,82 'css-loader':16,72 'css-modul':81 'default':29 'design':46 'ensur':68 'fix':54 'generat':32 'generic':2,7 'generic-nam':1 'hash':31,64 'helper':4 'independ':52 'interpol':11 'javascript':80 'latest':21 'loader':18,24,74 'loader-util':23 'match':69 'mismatch':79 'modul':38,44,83,86 'must':67 'name':3,8,35,53,78 'output':65 'pattern':10 'platform':51 'platform-independ':50 'postcss':43,85 'postcss-modules-scop':42,84 'produc':48 'scope':33,45,87 'similar':12 'stabl':19 'typescript':89 'use':22,40 'util':25 'v2.0.1':56 'v3':60 'v4':62 'v4.0.0':20 'version':70 'webpack':14,88 'xxhash64':27","created_at":"2026-04-25T11:21:07.917608+00:00","updated_at":"2026-04-25T11:21:07.917608+00:00","problems":[{"fix":"Use 'import generate from \"generic-names\"' or 'const generate = require(\"generic-names\")'.","cause":"Importing named export instead of default export.","error":"TypeError: generate is not a function"},{"fix":"Run 'npm install loader-utils' (or add it to project dependencies).","cause":"loader-utils is a peer dependency not installed automatically.","error":"Cannot find module 'loader-utils'"},{"fix":"Ensure exact version locking for generic-names and loader-utils across environments.","cause":"Different versions of loader-utils or generic-names used in different environments.","error":"Class names differ between development and production builds"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/css-modules/generic-names","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/generic-names","openapi_spec":null,"status_page":null,"smithery":null,"categories":["serialization"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}