Plumeria logo/ ✾ Plumeria
API reference

zss-engine

It is the plumeria Runtime zss-engine package
You can use this to develop Zero-runtime StyleSheet CSS-in-JS libraries.

Feature entry file:

export type { CustomProperties } from './types/common/css-properties';
export type { CreateStyle, ClassesStyle, ReturnType } from './types/main/create';
export type { KeyframesDefinition, CustomHTMLType } from './types/main/global';
export type { VarsDefinition, VarsTransformed } from './types/main/vars';
export { isServer, isDevelopment, isDevAndTest } from './utils/helper';
export { genBase36Hash } from './utils/hash';
export { transpiler } from './utils/transpiler';
export { build } from './utils/build';
export { injectClientCSS } from './utils/inject-client-css';
export { injectClientGlobalCSS } from './utils/inject-client-global-css';
export { injectServerCSS, getServerCSS } from './utils/inject-server-css';

Types

For API development.

TypeScript
// create method
CustomProperties, 
CreateStyle<T>, 
ReturnType<T>,
 
// global method
CustomHTMLType, 
 
// defineVars method
VarsDefinition,
VarsTransformed,
 
// keyframes method
KeyframesDefinition,

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);

build

Argments: styleSheet: string, filePath: string
Returns: void

TypeScript
  build(styleSheet, filePath);

injectClientCSS

Argments: hash: string, styleSheet: string
Returns: void

TypeScript
  injectClientCSS(base36Hash, styleSheet);

injectClientGlobalCSS

Argments: styleSheet: string, scoped: string
Returns: void

TypeScript
  injectClientGlobalCSS(styleSheet, 'global');

injectServerCSS

Argments: hash: string, styleSheet: string
Returns: void

TypeScript
  injectServerCSS(base36Hash, styleSheet);

getServerCSS

Argments: void Returns: styleSheet: string

TypeScript
  const serverCSS = getServerCSS();

On this page