Surimi is the next generation of CSS tooling. Think traditional CSS preprocessors, but with the power of Typescript and Rust built in.
CSS preprocessors like SCSS are great, but as CSS is getting more and more modern, they solve less and less problems. Today, CSS's biggest problems are Developer experience, type-safety, composability, extensibility, complex selectors etc. and Surimi solves all of them.
No more wrong variable names, missing units etc. Surimi is pure typescript, so you see all errors in your editor (and the console).
Get autocomplete, type hints, inline docs, compatibility notes, spec information and more. right in your editor as you type.
Built-in support for mixins, composition and more. And it's TypeScript! So use loops, functions, objects, nesting - all of it, fully typed.
If you already know CSS and TypeScript, you know Surimi. And if not, Surimi show's you all your options. Just one hover away.
CSS is nice and powerful, but lacking things we're used to in coding, like re-usable selectors,
compile-time and type safety, a direct JS interface, composability etc.
Typescript already solves all of this - and Surimi takes advantage of that.
const button = select('.my-button')
const input = select('input')
button.style({
backgroundColor: primary,
})
// Everything can be re-used.
button.hover().use(interactiveIcon, focusable, transitions.fast)
// Everything is chainable and type-safe.
button.active().not().disabled().style({
scale: 1.2,
})
// Incredible API. Yes, this works with ZERO runtime.
when(button).not.disabled().and.hovered().select('header').style({
scale: 1.2,
}).container), all related
styles update automatically.
Get up and running in seconds with your favorite package manager
npm install surimi yarn add surimi pnpm add surimi