Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

styletron-engine-atomic

1.0.13 • Public • Published

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

Keywords

none

install

npm i styletron-engine-atomic

Downloadsweekly downloads

24,222

version

1.0.13

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability