generic-names

What is generic-names?

The `generic-names` package is a utility for generating generic names based on a pattern. It is commonly used in the context of CSS module development to create consistent and unique class names based on the file name and local name (class name) to avoid naming collisions. This package allows developers to customize the naming convention, making it a flexible tool for managing CSS class names in a modular fashion.

What are generic-names's main functionalities?

Generating generic names

This feature demonstrates how to generate a generic name using the `generic-names` package. The `generate` function takes a pattern and options as arguments. The pattern includes placeholders like `[name]`, `[local]`, and `[hash:base64:5]` which are replaced with the file name, local name (class name), and a hash respectively. The `context` option specifies the directory to consider as the root for relative paths. The generated name is unique and consistent, making it suitable for use as a CSS class name in modular CSS systems.

const generate = require('generic-names');
const nameGenerator = generate('[name]__[local]___[hash:base64:5]', { context: process.cwd() });
console.log(nameGenerator('className', '/path/to/file.css'));

Other packages similar to generic-names

classnames

The `classnames` package is a utility for conditionally joining classNames together. Unlike `generic-names`, which is focused on generating unique class names based on a pattern, `classnames` is used to dynamically construct class names based on the state of the application. It's more about managing class names in the runtime rather than generating them based on a static pattern.

css-loader

The `css-loader` package is part of Webpack's loader system, and it interprets `@import` and `url()` like import/require() and will resolve them. It also has features for modularizing CSS by local scoping class names. While `css-loader` and `generic-names` both deal with CSS modules and class names, `css-loader` is more comprehensive, handling the loading and processing of CSS files, whereas `generic-names` focuses solely on generating names.

README

generic-names

Helper for building generic names, similar to webpack. Designed to be used with postcss‑modules‑scope.

Uses interpolateName from the webpack/loader-utils.

API

var genericNames = require('generic-names');
var generate = genericNames('[name]__[local]___[hash:base64:5]', {
  context: process.cwd()
});

generate('foo', '/case/source.css'); // 'source__foo___3mRq8'