Overview

mercss is our compile-time atomic CSS system for merjs. It already works (see /mercss-demo page), but needs more features to be a viable Tailwind CSS alternative.

Current State

✅ Implemented:

• Basic atomic CSS generation from Zig structs
• Type-safe design tokens
• Compile-time class name generation
• CSS string concatenation at comptime

Missing Features (vs Tailwind CSS)

High Priority

• Responsive prefixes (sm:, md:, lg:, xl:)
• State variants (hover:, focus:, active:)
• Property name mapping (border_radius → border-radius)
• Shorter class names (hash-based .a7f3e vs .mcss-padding)

Medium Priority

• Dark mode (dark: prefix)
• CSS custom properties support
• Container queries

Lower Priority

• Animation utilities
• Transform utilities
• Typography plugin equivalent

Design Questions

1. Responsive syntax: Nested structs vs prefix properties?
2. State variants: Per-component or global?
3. Class naming: Readable (mcss-) vs short (hash)?

Acceptance Criteria

• Responsive breakpoints work
• State variants work
• Property names in kebab-case
• Demo shows all features
• Docs updated

See docs/mercss.md for current implementation.