styletron-engine-atomic

styletron-engine-atomic

Atomic implementation of the styletron-standard engine interface.

Check our documentation at styletron.org.

Installation

yarn add styletron-engine-atomic

API

This package provides two named exports:

• Client - Client-side engine class
• Server - Server-side engine class

Client

import {Client} from "styletron-engine-atomic";

.constructor(opts?: {prefix?: string, hydrate?: HTMLStyleElement[], container: Element})

Options

• prefix?: string The prefix to be used for all generated atomic identifiers (e.g. class names, @keyframes names, etc.)
• hydrate?: HTMLStyleElement[] Collection of server-rendered style elements. Hydration is required when server-side rendering.
• container?: Element The element that new stylesheets should be appended to. Defaults to the parent element of the first stylesheet passed via hydrate, otherwise defaults to document.head.

const instance = new Client();

.renderStyle(style) => string

.renderKeyframes(keyframes) => string

.renderFontFace(fontFace) => string

Server

import {Server} from "styletron-engine-atomic";

.constructor(opts?: {prefix?: string})

Options

• prefix?: string The prefix to be used for all generated atomic identifiers (e.g. class names, @keyframes names, etc.)

const instance = new Server();

.getStylesheets() => Array<{css: string, attrs: {[string]: string}}>

Returns styles as an array of stylesheet objects.

.getStylesheetsHtml(className: string) => string

Returns styles as a string of HTML that can also be used for client-side hydration.

.getCss() => string

Returns styles as a string of CSS for purely server-side rendering use cases where no client-side hydration is needed.

.renderStyle(style) => string

.renderKeyframes(keyframes) => string

.renderFontFace(fontFace) => string

Universal methods

These methods exist on both the server and client instances.

.renderStyle(style) => string

Renders a given style object, returning the corresponding generated class name.

instance.renderStyle({
  color: "red",
  fontSize: "12px"
});
// → "a b"

.renderKeyframes(keyframes) => string

Renders a given keyframes object, returning the corresponding generated @keyframes rule name.

const animationName = instance.renderKeyframes({
  from: {color: "red"},
  to: {color: "blue"}
});
// → "a"

.renderFontFace(fontFace) => string

Renders a given font face object, returning the font-family name from the corresponding generated @font-face rule.

const fontFamily = instance.renderFontFace({
  src: "..."
});
// → "a"

Tradeoffs

See TRADEOFFS.md