NibCSS

Editor setup

TypeScript types for the `nib` attribute, typed config imports, formatting and linting.

1 min readv1

NibCSS attributes are plain strings, so every editor works out of the box. A few settings make the experience noticeably better.

TypeScript: the nib prop in JSX#

@nibcss/react augments React's types, so nib is a known attribute on every HTML and SVG element. Import the package anywhere in your app (your entry file already does) and the error Property 'nib' does not exist disappears:

TSX
import "@nibcss/react"; // types only, if nothing else is imported from it

export const Box = () => <div nib="p=16px; bdrd=8px" />; // ✅ typed

Without React (Preact, Solid, custom JSX), declare it yourself once:

TypeScript
// src/nib.d.ts
import "react";

declare module "react" {
  interface HTMLAttributes<T> {
    nib?: string;
    "data-nib"?: string;
  }
  interface SVGAttributes<T> {
    nib?: string;
  }
}

Typed config import#

The build plugin publishes your resolved config as a real package at node_modules/@nibcss/config, with types, so this type-checks with no paths entry:

TypeScript
import config from "@nibcss/config";

<NibProvider {...config}>…</NibProvider>

Vue, Svelte and Angular templates#

Templates accept any attribute, so nib="…" needs no setup. For bound values use the adapter: v-nib="'…'" (Vue), use:nib={'…'} (Svelte), [nib]="'…'" (Angular).

Formatting long attributes#

Prettier keeps attribute strings as they are. Line breaks inside the string are valid — whitespace around ; is ignored — so long rule lists can be wrapped for readability:

HTML
<button
  nib="d=inline-flex; ali=center; g=8px;
       p=10px 18px; bdrd=10px; bd=none;
       bgc=$color.brand; cl=#fff;
       hover:bgc=#3A3DBF; focus-visible:otl=2px solid $color.brand">
  Save
</button>

Catching mistakes while you type#

Set debug: true in nibcss.config.ts. The build reports every unknown shorthand, unknown token and invalid value in the terminal with its file and line, and the dev overlay shows it in the browser with suggestions. See Debugging →

Next steps#