zss-engine

2.2.8 verified Fri May 01 auth: no javascript

A CSS-in-JS transpiler engine for building zero-runtime stylesheets at build time. Current stable version is 2.2.8, released with refactored library-specific code removal. It powers the build pipeline of @plumeria/core. Key differentiators include atomic CSS generation, hash-based class names, and zero-runtime stylesheets. It supports transpilation of both atomic and nested CSS, processes pseudo-elements, and provides CSS properties type definitions. The library is actively maintained with a focus on compile-time CSS extraction.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/zss-engine/index.js from /path/to/project/file.js not supported. ↓

cause zss-engine is ESM-only, cannot be required.

fix

Use import syntax instead of require(), or set { type: 'module' } in package.json.

error TS2305: Module 'zss-engine' has no exported member 'CreateStyle'. ↓

cause CreateStyle was removed in version 2.2.7.

fix

Use CreateStyleType or the new API structure; check the type definitions.

error 'zss-engine' does not contain a default export. ↓

cause The package only exports named exports, not a default export.

fix

Use named imports like import { transpile } from 'zss-engine'.

Warnings

breaking CreateStyle type removed in v2.2.7 ↓

fix Use CreateStyleType instead if needed, or migrate to alternative API.

breaking Plumeria-specific API types removed in v2.2.8 ↓

fix Remove imports of Plumeria-specific types; they are no longer exported.

deprecated server/client detection code removed in v2.2.8 ↓

fix If you relied on server/client detection, implement your own logic.

gotcha ESM-only package; require() fails ↓

fix Use import syntax or configure bundler for ESM interop.

gotcha transpileAtomic now allows pseudo-elements to be atomic since v2.2.0, may change output ↓

fix Review generated atomic classes for pseudo-elements; they are now treated as atomic.

Install

npm install zss-engine

yarn add zss-engine

pnpm add zss-engine

Imports

CSSProperties

wrong

import CSSProperties from 'zss-engine'

correct

import { CSSProperties } from 'zss-engine'

CSSProperties is a named type export, not default.

transpile

wrong

const { transpile } = require('zss-engine')

correct

import { transpile } from 'zss-engine'

ESM-only; require() does not work as the package is ESM.

genBase36Hash
```
import { genBase36Hash } from 'zss-engine'
```
Utility for generating base36 hashes, export stable since v2.2.8.

transpileAtomic

wrong

import { transpileAtomic } from 'zss-engine/transpile-atomic'

correct

import { transpileAtomic } from 'zss-engine'

Direct named export; no subpath import needed.

Quickstart

Shows transpile, transpileAtomic, and genBase36Hash usage with atomic CSS generation and hashing.

import { transpile, transpileAtomic, genBase36Hash } from 'zss-engine';

const cssInput = `
  .button {
    color: red;
    font-size: 16px;
  }
`;

const atomicOutput = transpileAtomic(cssInput, { hash: true });
console.log('Atomic CSS:', atomicOutput);

const hash = genBase36Hash('sample');
console.log('Hash:', hash);

const transpiled = transpile(cssInput);
console.log('Transpiled:', transpiled);