feat: mercss compile-time atomic CSS system with Tailwind parity (#91)#92
feat: mercss compile-time atomic CSS system with Tailwind parity (#91)#92yxlyx wants to merge 1 commit intojustrach:mainfrom
Conversation
- Implement src/mercss.zig: FNV-1a hash-based class names, responsive breakpoints (sm-xl2), state variants (hover/focus/active), dark mode support, and 30+ comptime tests - Implement src/design.zig: complete Tailwind-inspired design system with spacing, typography, 17 color scales (11 shades each), shadows, blur, transitions, easing curves, and semantic aliases - Wire mercss and design exports into src/mer.zig and build.zig - Add examples/site/app/mercss-demo.zig: live demo page showcasing all mercss features with generated CSS preview - Add docs/mercss.md: comprehensive documentation - Manually update src/generated/routes.zig to register mercss-demo route (codegen blocked by macOS SDK linking issue with Zig 0.15.2)
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 22a492a1e9
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const inner = generateStyleBlock(state, styles); | ||
| if (inner.len == 0) return ""; | ||
|
|
||
| return std.fmt.comptimePrint(".{s}\\:{s}{{{s}}}", .{ state, inner, inner }); |
There was a problem hiding this comment.
generateStateStyles currently formats selectors with ".{s}\\:{s}{{{s}}}", where the second placeholder is the full rule block from generateStyleBlock (for example .mAbc123{...}). That produces malformed CSS such as .hover\:.mAbc123{...}{.mAbc123{...}}, and Component.classes only emits hashed class tokens, so no valid :hover/:focus/:active rule matches at runtime. Any component using .hover, .focus, or .active silently loses interactive styling.
Useful? React with 👍 / 👎.
| pub const meta: mer.Meta = .{ | ||
| .title = "mercss Demo", | ||
| .description = "Showcase of mercss compile-time atomic CSS system with responsive breakpoints, state variants, and dark mode.", | ||
| .extra_head = "<style>" ++ page_css ++ "</style>" ++ mercss_css, |
There was a problem hiding this comment.
The demo metadata concatenates mercss_css after closing </style>, so the atomic CSS is emitted as raw text in <head> instead of stylesheet content. Because extra_head is injected verbatim, browsers won't parse those rules as CSS, and /mercss-demo will not apply styles for Button, Card, or DarkCard classes.
Useful? React with 👍 / 👎.
1 participant
Summary
Implements a zero-runtime, compile-time atomic CSS system for merjs with full Tailwind-inspired feature parity.
Key Design Decisions
Testing
Known Issues
Closes #91