🧱 rsx-z

LIVE EXAMPLE

rsx-z is a minimal atomic CSS-in-JS engine.
It converts style objects into deterministic atomic class names at runtime.
Framework-agnostic, SSR-ready, and tiny by design.

Typed. Atomic. Deterministic CSS runtime.

Why rsx-z?

Modern CSS-in-JS libraries are often:

• Heavy
• Framework-coupled
• Runtime-expensive
• Over-abstracted

rsx-z focuses strictly on:

• Style execution
• Atomic rule generation
• Deterministic hashing
• Predictable injection

No virtual DOM.
No template DSL.
No compile step.
Nothing more.

Mental Model

style(object)
   ↓
normalize + sort keys
   ↓
atomic(prop, value)
   ↓
hash
   ↓
sheet.insert(rule)

Deterministic.
Cached.
Idempotent.

Installation

npm install rsx-z

Basic Usage (Vanilla)

import { createStyleEngine, createDOMSheet } from "rsx-z"

const engine = createStyleEngine(createDOMSheet())

const className = engine.style({
  backgroundColor: "black",
  color: "white",
  padding: 12,
  borderRadius: 8,
})

document.body.className = className

Generated CSS (atomic)

.a1b2c3{background-color:black;}
.d4e5f6{color:white;}
.g7h8i9{padding:12px;}
.j1k2l3{border-radius:8px;}

Features

✅ Atomic rule generation

Each declaration becomes its own class.

Benefits

• Maximum deduplication
• Minimal CSS output
• Efficient caching

✅ Typed CSS (via csstype)

Full IntelliSense support:

engine.style({
  backgroundColor: "red",
  display: "flex",
})

✅ Auto camelCase → kebab-case

borderRadius → border-radius

✅ Auto unit append (px)

padding: 12

Becomes:

padding:12px;

Unitless properties are respected:

• lineHeight
• opacity
• zIndex
• etc.

✅ Nested selectors

engine.style({
  color: "black",
  ":hover": { color: "red" },
  "& > span": { color: "blue" }
})

✅ Media queries

engine.style({
  color: "black",
  "@media (max-width: 600px)": {
    color: "red"
  }
})

✅ Keyframes

engine.style({
  "@keyframes": {
    fadeIn: {
      from: { opacity: 0 },
      to: { opacity: 1 }
    }
  },
  animation: "fadeIn 0.3s ease"
})

Keyframes are hashed and injected once.

✅ Vendor prefix support

Required prefixes are automatically added where necessary.

✅ SSR Support

Extract critical CSS:

const css = engine.extractCritical()

Hydrate on the client:

engine.hydrate(existingCSS)

Framework Examples

React

import { useMemo } from "react"
import { createStyleEngine, createDOMSheet } from "rsx-z"

const engine = createStyleEngine(createDOMSheet())

export function useStyle(style) {
  return useMemo(() => engine.style(style), [style])
}

const className = useStyle({
  backgroundColor: "black",
  color: "white"
})

return <div className={className} />

Vue

import { computed } from "vue"
import { createStyleEngine, createDOMSheet } from "rsx-z"

const engine = createStyleEngine(createDOMSheet())

export function useStyle(styleRef) {
  return computed(() => engine.style(styleRef.value))
}

Comparison

| Feature | rsx-z | Emotion | styled-components | StyleX | Vanilla Extract | |---------------------------------|--------|----------|------------------|--------|-----------------| | Atomic CSS | ✅ | ❌ | ❌ | ✅ | ❌ | | Runtime styling | ✅ | ✅ | ✅ | ⚠️ Partial | ❌ (build-time) | | Zero config | ✅ | ✅ | ✅ | ❌ (Babel) | ❌ (build step) | | Framework agnostic | ✅ | ⚠️ React-focused | ❌ React only | ⚠️ React-focused | ✅ | | Deterministic hashing | ✅ | ⚠️ | ⚠️ | ✅ | ✅ | | SSR support | ✅ | ✅ | ✅ | ✅ | ✅ | | Type-safe via csstype | ✅ | ⚠️ | ⚠️ | ✅ | ✅ | | No compile step required | ✅ | ✅ | ✅ | ❌ | ❌ | | Minimal bundle size | ✅ | ❌ | ❌ | ✅ | ✅ |

Key Differences

rsx-z vs Emotion / styled-components

• Atomic output → smaller CSS
• No component abstraction layer
• Framework-agnostic core
• Avoids repeated runtime style parsing

rsx-z vs StyleX

• No Babel plugin required
• Pure runtime engine
• No compile-time dependency
• Simpler integration surface

rsx-z vs Vanilla Extract

• Fully runtime-based
• No build-time extraction
• Better suited for dynamic styles

When to use rsx-z

Use rsx-z if you need:

• Atomic runtime CSS
• Framework independence
• Deterministic output
• Dynamic style generation
• Minimal abstraction surface

Avoid rsx-z if you require:

• Compile-time CSS extraction only
• Component-based styling DSL
• Strict design-token pipelines

Design Principles

• Deterministic hashing
• Stable output ordering
• Minimal runtime overhead
• No framework coupling
• Predictable injection
• Small surface area

License

MIT