zss-engine

zss-engine is the public runtime API for Plumeria.
Use this to build zero-runtime CSS-in-JS libraries on top of the same StyleSheet engine.

Installation

Terminal

npm i zss-engine

Terminal

yarn add zss-engine

Terminal

pnpm i zss-engine

Overview

TypeScript

export type { CSSProperties } from './types/common/css-properties';
export type { CreateStyle } from './types/main/create';
export type { CreateTheme } from './types/main/variableTypes';
export type { ViewTransition } from './types/main/viewTransition';
export { isServer, isDevelopment, isTestingDevelopment } from './utils/helper.js';
export { genBase36Hash } from './utils/hash.js';
export { transpile } from './utils/transpile.js';
export { transpileAtomic } from './utils/transpile-atomic.js';
export { splitAtomicAndNested, processAtomicProps } from './utils/processor-atomic.js';
export { overrideLonghand } from './utils/override-longhand.js';
export { camelToKebabCase, applyCssValue } from './utils/helper.js';

API

Helpers

For branching the environment.

TypeScript

const isWindowDefined = typeof window !== 'undefined';
const isDocumentDefined = typeof document !== 'undefined';
export const isServer = !isWindowDefined || !isDocumentDefined;
export const isDevelopment = process.env.NODE_ENV === 'development';
export const isDevAndTest = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';

Functions

`genBase36Hash`

Arguments: object, number of hash lengths
Returns: string of hash

TypeScript

const base36Hash = genBase36Hash(object, 6);

`transpiler`

Argments: object: style object, hash: string
Returns: styleSheet: string

TypeScript

const { styleSheet } = transpiler(object, base36Hash);

`transpilerAtomic`

Argments: object: style object, value: string | number, hash: string
Returns: styleSheet: string

TypeScript

const { styleSheet } = transpilerAtomic(object, property, atomichash);

Types

For API development.

TypeScript

CSSProperties
CreateStyle
CreateTheme
ViewTransition

zss-engine

On this page