TypeStyle

Import the style function from typestyle. Pass a style object to style() to convert it into a CSS class name. You can then apply this class name to elements in any framework (e.g., React or Angular).

/** Import */
import {style} from "typestyle";

/** convert a style object to a CSS class name */
const className = style({color: 'red'});

/** Use the class name in a framework of choice */
//  e.g. React
const MyButton =
  ({onClick,children}) => <button className={className} onClick={onClick}>
        {children}
      </button>

Install TypeStyle via npm to start writing type-safe CSS in JavaScript/TypeScript.

npm install typestyle --save

The media function helps customize styles using media queries. It takes a MediaQuery object and one or more style objects, returning a nested style object that can be used within TypeStyle's style() function.

Supported MediaQuery properties:

• type (e.g., 'screen')
• orientation (e.g., 'landscape')
• minWidth, maxWidth, minHeight, maxHeight (automatically appends px if a number is provided)
• prefersColorScheme (e.g., 'dark')

The CSSProperties interface extends standard CSS properties (via csstype) and includes Typestyle-specific configuration options:

• $unique: A boolean flag. When set to true, the generated CSS selector gets its own unique location in the generated CSS, disabling deduplication. Instead of combining selectors (e.g., .classA, .classB { ... }), it generates separate rules (e.g., .classA { ... } .classB { ... }). This is useful for certain browser edge cases like placeholder styling.

The extend function merges multiple NestedCSSProperties objects into one. If multiple objects contain the same property, the last one provided wins.

Key behaviors:

• Falsy values (except 0) are ignored.
• Supports recursive merging for $nest properties.
• Supports merging for keys containing & (pseudo-selectors) or starting with @media.