☕ Demitasse

CSS Modules in TypeScript…the simple way

Demitasse offers a component development experience comparable to Typed CSS Modules or CSS-in-TypeScript (CSS-in-JS) without the typical runtime cost or unwieldy configuration of those approaches.

💅 Author style rules within TypeScript.

👬 Colocate styles and markup.

⚒️ Extract static CSS at build time.

📦 Locally-scoped class names

🔎 Transparent build configuration

👼 Pure computation / no side effects

Installation

npm install demitasse

API

cssBindings

cssBindings:
  (css: string) => {
    classes: Record<ClassRef extends string, string>;
    ids: Record<IdRef extends string, string>;
  }

Given a style sheet, returns a map of class names and IDs. For use with dot notation, keys are converted to camel-case; e.g. button-label is converted to buttonLabel. The values correspond to the names that appear in the css.

makeCSSBindings

makeCSSBindings:
  <Context>(mapFn: (name: string, meta: { type: "class" | "id", context: Context }) => string) =>
    (css: string, context: Context) => {
      classes: Record<ClassRef extends string, string>;
      ids: Record<IdRef extends string, string>;
    }

Given a mapping function mapFn, returns a function similar to cssBindings, except with one additional context parameter. The context argument is forwarded to mapFn and can be used e.g. to add a prefix to the class name or ID.

Generated docs

Generated API documentation is available here.

Additional resources

• Examples
• Guides