Switch branches/tags
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src Catch errors from invalid/unprefixed rules Dec 10, 2018
README.md Fix README link Apr 18, 2018
TRADEOFFS.md V4 implementation (#217) Feb 24, 2018
package.json Publish Dec 13, 2018

README.md

styletron-engine-atomic

npm version dependencies status

Atomic implementation of the styletron-standard engine interface.

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