{"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,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","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,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}