{"id":26686,"library":"zss-engine","title":"zss-engine","description":"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.","status":"active","version":"2.2.8","language":"javascript","source_language":"en","source_url":"https://github.com/zss-in-js/zss-engine","tags":["javascript","stylesheet","transpiler","atomic","atomic-css","semantic","wyw-in-js","engine","zero-runtime","typescript"],"install":[{"cmd":"npm install zss-engine","lang":"bash","label":"npm"},{"cmd":"yarn add zss-engine","lang":"bash","label":"yarn"},{"cmd":"pnpm add zss-engine","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"CSSProperties is a named type export, not default.","wrong":"import CSSProperties from 'zss-engine'","symbol":"CSSProperties","correct":"import { CSSProperties } from 'zss-engine'"},{"note":"ESM-only; require() does not work as the package is ESM.","wrong":"const { transpile } = require('zss-engine')","symbol":"transpile","correct":"import { transpile } from 'zss-engine'"},{"note":"Utility for generating base36 hashes, export stable since v2.2.8.","wrong":null,"symbol":"genBase36Hash","correct":"import { genBase36Hash } from 'zss-engine'"},{"note":"Direct named export; no subpath import needed.","wrong":"import { transpileAtomic } from 'zss-engine/transpile-atomic'","symbol":"transpileAtomic","correct":"import { transpileAtomic } from 'zss-engine'"}],"quickstart":{"code":"import { transpile, transpileAtomic, genBase36Hash } from 'zss-engine';\n\nconst cssInput = `\n  .button {\n    color: red;\n    font-size: 16px;\n  }\n`;\n\nconst atomicOutput = transpileAtomic(cssInput, { hash: true });\nconsole.log('Atomic CSS:', atomicOutput);\n\nconst hash = genBase36Hash('sample');\nconsole.log('Hash:', hash);\n\nconst transpiled = transpile(cssInput);\nconsole.log('Transpiled:', transpiled);","lang":"typescript","description":"Shows transpile, transpileAtomic, and genBase36Hash usage with atomic CSS generation and hashing."},"warnings":[{"fix":"Use CreateStyleType instead if needed, or migrate to alternative API.","message":"CreateStyle type removed in v2.2.7","severity":"breaking","affected_versions":">=2.2.7"},{"fix":"Remove imports of Plumeria-specific types; they are no longer exported.","message":"Plumeria-specific API types removed in v2.2.8","severity":"breaking","affected_versions":">=2.2.8"},{"fix":"If you relied on server/client detection, implement your own logic.","message":"server/client detection code removed in v2.2.8","severity":"deprecated","affected_versions":">=2.2.8"},{"fix":"Use import syntax or configure bundler for ESM interop.","message":"ESM-only package; require() fails","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Review generated atomic classes for pseudo-elements; they are now treated as atomic.","message":"transpileAtomic now allows pseudo-elements to be atomic since v2.2.0, may change output","severity":"gotcha","affected_versions":">=2.2.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use import syntax instead of require(), or set { type: 'module' } in package.json.","cause":"zss-engine is ESM-only, cannot be required.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/zss-engine/index.js from /path/to/project/file.js not supported."},{"fix":"Use CreateStyleType or the new API structure; check the type definitions.","cause":"CreateStyle was removed in version 2.2.7.","error":"TS2305: Module 'zss-engine' has no exported member 'CreateStyle'."},{"fix":"Use named imports like import { transpile } from 'zss-engine'.","cause":"The package only exports named exports, not a default export.","error":"'zss-engine' does not contain a default export."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}