CTSS: Composable TypeScript Styles

Benefits

• Works with React, Vue, Preact.
• Use static CSS, not CSS-in-JS.
  • No dynamically inserted stylesheets.
  • No CSS injection attacks.
  • No JavaScript event subscribers for @media queries, :hover, :focus, :active.
• Autocompletion and type-safety with TypeScript — typos in class names are compile-time errors.
• Handle breakpoints easily: sm() md() lg() xl()
• Handle hover and focus states: hover() focus() active()
• Reusable atomic building blocks for your components.

Example with TailwindCSS

Using the our TailwindCSS functions. You can bring your own too.

Compose multiple classes with type-safety

import { ctss } from "ctss";
import { text, font, bg, p } from "ctss-tailwind";

const className = ctss(
  text("center", "lg", "purple-dark"),
  font("sans")
  bg("white"),
  p("4")
);
// "text-center text-lg text-purple-dark font-sans bg-white p-4"

Handle hover states

const className = ctss(
  bg("white"),
  hover(
    bg("red")
  )
);
// "bg-white hover:bg-red"

Dynamically change based on variables

const makeButtonClass = (isPrimary: boolean) => ctss(
  isPrimary ? bg("primary") : bg("white"),
  hover(
    isPrimary ? bg("primary-light") : bg("grey-lightest")
  )
);

makeButtonClass(true); // "bg-primary hover:bg-primary-light"
makeButtonClass(false); // "bg-white hover:bg-grey-lightest"

Core package: @ctss/core

Core currently has two functions.

export function ctss<Name extends string>(...arrayOfNames: Array<Array<Name>>): string;

export function addPrefixToMany(arrayOfSuffixes: Array<Array<string>>, prefix: string): Array<string>;

Further Reading

• CSS Utility Classes and “Separation of Concerns”
• In Defense of Functional CSS
• In Defense of Utility-First CSS
• Shopify’s Polaris: Design Tokens
• Thumbtack’s Thumbprint: Color System
• Salesforce’s Lightning: Design Tokens