@hozo/stylex•Meta StyleX · Type Safety

StyleX & Type-Safe CSS-in-JS

Utility classes are fast for product prototyping, but large enterprise codebases and strict design systems demand deterministic style merging and typed props. Hozo integrates Meta's StyleX as a first-class frontend in its Rust compiler, coexisting with Tailwind in the same workspace.

Why StyleX Coexists with Tailwind in Hozo

Rather than forcing a single styling dogma, Hozo's intermediate representation (hozo_ir) accepts both utility classes and typed CSS-in-JS definitions:

01: Deterministic Order

No Specificity Wars

StyleX guarantees that whichever style is applied last wins, regardless of declaration order or class name specificity.

02: Typed Token Contracts

Strict Design Systems

Props can enforce exact style variants through TypeScript types, preventing invalid inline style regressions in large engineering teams.

03: Zero Runtime Cost

AOT Compilation

stylex.create calls are analyzed at build time. Web emits deduplicated atomic classes; Native emits constant StyleSheets.

Coexistence Without Friction

Dual-Frontend Compiler

Write Tailwind on marketing pages and StyleX in your component library:

  • Both syntaxes lower into the same shared intermediate representation (hozo_ir).
  • Shared CSS class deduplication across Tailwind and StyleX output.
  • Identical zero-runtime guarantees across both styling pipelines.

Smooth Migration Path

Migrate existing React Native or Web applications incrementally:

  • Drop-in replacement for existing React Native StyleSheet.create objects.
  • Replaces runtime CSS-in-JS libraries (Styled Components, Emotion) with zero-cost static CSS.
  • No need to rewrite components overnight — adopt package by package.

StyleX Authoring Example

Define typed styles with stylex.create. Hozo evaluates them statically and emits zero-runtime styles for both platforms.

import * as stylex from '@stylexjs/stylex'
import { View, Text } from '@hozo/core'

const styles = stylex.create({
  base: {
    padding: 16,
    borderRadius: 12,
    backgroundColor: '#1c1a18',
    borderWidth: 1,
    borderColor: 'rgba(200, 168, 130, 0.18)',
  },
  active: {
    borderColor: '#c8a882',
    transform: 'scale(1.02)',
  },
})

export function TypedCard({ isActive }) {
  return (
    <View style={[styles.base, isActive && styles.active]}>
      <Text className="text-shikkui font-bold">
        Type-Safe StyleX Component
      </Text>
    </View>
  )
}