Mochi.css brings the ergonomics of CSS-in-JS without paying the significant runtime cost. Styles are statically extracted at build time through a PostCSS plugin, making your shipped bundle smaller, predictable, and framework-agnostic.
- Zero runtime – no style logic in your final bundle
- Build-time CSS extraction – using a PostCSS plugin
- Style variants – create variants for your styles with ease
- Nested selectors – use sub-selectors in your styles
- Media queries – make your styles responsive
- Great type support – TypeScript-first DX
- Minimal restrictions – define styles anywhere your code allows
- Tooling agnostic – works with anything that supports PostCSS
- CSS splitting – improve your load times using tree-shaking
npx @mochi-css/tsukiAfter running tsuki should have all the plugins installed.
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/react";
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 are required.
Detailed documentation about different parts of Mochi.css can be found here:
- @mochi-css/vanilla - core package that provides styling functions
- @mochi-css/config - configuration definition; read to learn more about available options
- @mochi-css/tsuki - installer for Mochi.css
- @mochi-css/postcss - postcss plugin
- @mochi-css/next - Next.js plugin
- @mochi-css/vite - Vite plugin
- @mochi-css/esbuild - esbuild plugin
- @mochi-css/builder - utilities for extracting styles from source code and generating CSS from them
Early release – starting with version 3, new features and improvements will be added while preserving code compatibility within the same major version. This guarantees that package upgrades within the same major version will not break your code, as long as you don't rely on bugs existing in the previous versions. If you want to upgrade to the next major version, please read release notes and migration guides to ensure a smooth transition.
Benchmarks comparing bundle size and runtime overhead against other CSS-in-JS libraries are available in tools/benchmarks/.
Run yarn workspace @mochi-css/benchmarks benchmark from the repo root to reproduce results on your machine.
Fixture: mock Mochi homepage (Navbar, Hero, Stats, Features, CodeShowcase, ApiCarousel, ComponentExplorer, Cta, Footer). Measured on an Intel Core i7-14700K with Slow 4G throttling (1.6 Mbps, 150 ms RTT) and 8x CPU slowdown. Results as of 2026-05-23.
| Library | Build time | JS bundle (gz) | CSS output (gz) | FCP | TBT | CLS |
|---|---|---|---|---|---|---|
mochi-vanilla-react |
2.3 s | 61.4 kB | 2.1 kB | 1.9 s | 0 ms | 0.000 |
mochi-stitches |
1.6 s | 70.0 kB | 2.2 kB | 2.1 s | 0 ms | 0.000 |
vanilla-extract |
3.0 s | 61.6 kB | 1.9 kB | 1.9 s | 0 ms | 0.000 |
stitches |
1.5 s | 67.8 kB | 0 kB * | 2.0 s | 0 ms | 0.000 |
panda |
3.8 s | 67.5 kB | 6.4 kB | 2.2 s | 0 ms | 0.000 |
css-modules |
1.6 s | 61.5 kB | 2.3 kB | 2.1 s | 0 ms | 0.000 |
- Stitches.js injects styles at runtime — no CSS file is produced.
| Feature | Status | Notes |
|---|---|---|
| Mochi.css/mango | 🕒 Queued | Theming library built on top of Mochi.css/vanilla |
| Partial PandaCSS adapter | 🕒 Queued | Drop-in replacement for styled and cva from PandaCSS. Other features may not be supported due to different architectures of PandaCSS and Mochi.css |
| CSS optimization | 🚧 In Progress | Perform simple optimizations on the generated code |
| Mochi.css/bento | 🚧 In Progress | Layouting library providing primitives for shaping your ui |
| Blog example app | 🕒 Queued | My(Niikelion) personal blog built with Mochi.css provided as an example of a small, functional app |
| Japanese learning app | 🕒 Queued | Example japanese learning website. Content will not be included in the source code |
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.