ClassNameSlug

Kind: Type

Source: src/helper/css/common.ts

Part of: Helper

A function that customizes generated CSS class names.

ClassNameSlug defines a callback for customizing CSS class names generated by the styling layer. It receives the class-generation context and returns the string used as the generated class name, allowing applications to apply consistent naming or scoping rules.

Definition

ts
(hash: string, label: string, styleString: string) => string

Diagram

mermaid
graph LR
  Styles[Style definition] --> Generator[CSS class-name generator]
  Generator --> Slug[ClassNameSlug callback]
  Slug --> ClassName[Generated CSS class name]
  ClassName --> DOM[Rendered element]

Usage

ts
import type { ClassNameSlug } from './helper/css/common';

const createScopedClassName: ClassNameSlug = (rule, sheet) => {
  const sheetName = sheet?.options.name ?? 'styles';

  return `${sheetName}-${rule.key}`;
};

// Pass the callback to the CSS generation configuration.
const cssOptions = {
  classNameSlug: createScopedClassName,
};

AI Coding Instructions

• Return deterministic class names so matching style rules produce stable output.
• Keep generated names valid for CSS selectors and avoid whitespace or unsupported characters.
• Preserve rule and stylesheet context when adding prefixes or scopes.
• Use this callback at the CSS generation configuration boundary rather than rewriting class names after rendering.