A near zero-runtime CSS-in-JS solution with build-time style extraction
Mochi-CSS brings the ergonomics of CSS-in-JS without paying the substantial runtime cost. Styles are statically extracted at build time through a PostCSS plugin, making your shipped bundle smaller, predictable, and framework-agnostic.
- Near zero runtime - no style injection logic in your final bundle
- Build-time CSS extraction - using a PostCSS plugin
- Familiar API - both
styledandcss, mirroring stitches.js syntax - Style variants - create variants for your styles with ease
- Great type support - TypeScript-first DX
- Minimal restrictions - define styles anywhere your code allows
- Tooling agnostic - works with anything that supports PostCSS
npm i @mochi-css/vanilla
npm i @mochi-css/postcss --save-devAdd the Mochi-CSS PostCSS plugin to your postcss.config.js:
module.exports = {
plugins: {
'@mochi-css/postcss': {}
}
}Create src/globals.css file and import it in your project.
After that, you can go wild with your styles!
import { styled } from "@mochi-css/vanilla";
const Title = styled("h1", {
fontSize: 32,
lineHeight: 36,
});
export default function App() {
return <Title>Hello Mochi</Title>;
}At build time, the PostCSS plugin extracts the styles into a static .css file. No runtime style injection or providers required.
Detailed documentation about different parts of Mochi-CSS can be found here:
- @mochi-css/vanilla - core package that provides styling functions
- @mochi-css/postcss - postcss plugin
- @mochi-css/builder - utilities for extracting styles from source code and generating css from them
Alpha - APIs may change, but core concepts are stable.
Benchmarks and performance comparisons will be released at a later stage.
| Feature | Status | Notes |
|---|---|---|
| Nested selectors | 🚧 In Progress | Achieve stitches.js–style nested syntax |
| Cross-file symbol usage | 🚧 In Progress | Use imported tokens/objects in extracted styles |
| Mochi-CSS/tsuki | 🕒 Queued | Small CLI tool for adding Mochi-CSS to existing projects |
| Better DX tooling | 🕒 Queued | Better warnings and errors; more precise code extraction |
| Benchmarks | 🕒 Queued | Compare bundle/runtime size with other CSS-in-JS libraries |
| Tree-shaking | 🕒 Queued | Support injecting css outside globals.css file, making it possible for the frameworks like NextJS to tree-shake generated styles |
| Mochi-CSS/mango | 🕒 Queued | Theming library built on top of Mochi-CSS/vanilla |
Status legend
🚧 In Progress — actively being worked on
🕒 Queued — planned, not yet in development
Contributions, feedback, and ideas are welcome! Please open issues and PRs to help shape Mochi-CSS.
You can also support me on my patreon.