NibCSS

TypeScript

Types for the nib attribute, the config, and the engine and runtime APIs.

1 min readv1

Every package ships its own types.

Typed config#

TypeScript
import { defineConfig, type NibConfig } from "@nibcss/core";

const brand: NibConfig["tokens"] = { color: { brand: "#4F52D9" } };

export default defineConfig({ tokens: brand });

Useful exports#

From

Types

@nibcss/core

NibConfig, ResolvedConfig, Tokens, Components, Breakpoints, DarkModeStrategy, ProcessResult, CssRule, Diagnostic, Engine

@nibcss/runtime

NibRuntime, RuntimeOptions

@nibcss/react

NibProviderProps + the nib JSX attribute augmentation

@nibcss/vue

NibPluginOptions

@nibcss/svelte

NibAction

The nib attribute in JSX#

Importing @nibcss/react augments HTMLAttributes and SVGAttributes with nib and data-nib. For other JSX runtimes see Editor setup.

Typing recipe names#

Recipe names are plain strings. To catch typos at compile time, derive a union from your config:

TypeScript
// nibcss.config.ts
export const components = {
  btn: "…",
  "btn-primary": "btn; …",
} as const;
export default defineConfig({ components });

// elsewhere
import type { components } from "../nibcss.config";
type Recipe = keyof typeof components;   // "btn" | "btn-primary"

const variant: Recipe = "btn-primary";

Next steps#