CssClassName

Kind: Interface

Source: src/helper/css/common.ts

Part of: Helper

CssClassName describes a CSS class definition and its related selector data. It stores the selector text, generated class name, CSS style string, nested selector entries, and external class names that should be associated with the class.

Properties

Diagram

mermaid
graph LR
  CssClassName[CssClassName]
  CssClassName --> Selector[SELECTOR: string]
  CssClassName --> ClassName[CLASS_NAME: string]
  CssClassName --> StyleString[STYLE_STRING: string]
  CssClassName --> Selectors[SELECTORS: CssClassName[]]
  CssClassName --> ExternalClassNames[EXTERNAL_CLASS_NAMES: string[]]
  Selectors --> NestedSelector[CssClassName]

Usage

ts
import type { CssClassName } from "./helper/css/common";

const buttonClass: CssClassName = {
  SELECTOR: ".button",
  CLASS_NAME: "button",
  STYLE_STRING: "background: blue; color: white;",
  SELECTORS: [
    {
      SELECTOR: ".button:hover",
      CLASS_NAME: "button-hover",
      STYLE_STRING: "background: navy;",
      SELECTORS: [],
      EXTERNAL_CLASS_NAMES: [],
    },
  ],
  EXTERNAL_CLASS_NAMES: ["btn", "btn-primary"],
};

console.log(buttonClass.SELECTOR);
console.log(buttonClass.SELECTORS[0].STYLE_STRING);

AI Coding Instructions

• Populate every CssClassName field when creating an object; use empty arrays when no nested selectors or external class names exist.
• Store CSS selector text in SELECTOR and the emitted class token in CLASS_NAME; do not treat them as interchangeable.
• Add nested or related selector definitions to SELECTORS using the same CssClassName shape.
• Keep STYLE_STRING as the CSS declaration content associated with the selector.
• Add class names from outside the generated CSS flow to EXTERNAL_CLASS_NAMES.