zss-engine

library2.2.8jsnpmunverified

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.

web-framework devops

npm install zss-engine

github ↗package ↗

INSTALL

IMPORT

SIG · ZSS-ENGINE

zss-engine

web-frameworkjavascriptv2.2.8

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

CSSProperties

✓ import { CSSProperties } from 'zss-engine'

✗ import CSSProperties from 'zss-engine'

CSSProperties is a named type export, not default.

transpile

✓ import { transpile } from 'zss-engine'

✗ const { transpile } = require('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

✓ import { transpileAtomic } from 'zss-engine'

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

Direct named export; no subpath import needed.

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

Debug

Known issues

breakingCreateStyle type removed in v2.2.7

fix

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

affects: >=2.2.7

breakingPlumeria-specific API types removed in v2.2.8

fix

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

affects: >=2.2.8

deprecatedserver/client detection code removed in v2.2.8

fix

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

affects: >=2.2.8

gotchaESM-only package; require() fails

fix

Use import syntax or configure bundler for ESM interop.

affects: >=2.0.0

gotchatranspileAtomic 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.

affects: >=2.2.0

Errors

Common errors & fixes

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

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

fix

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

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

CreateStyle was removed in version 2.2.7.

fix

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

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

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

fix

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

Upgrade

Version history

2.2.8latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

51 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/zss-in-js/zss-engine ↗

packagehttps://www.npmjs.com/package/zss-engine ↗