Surimi is the next generation of CSS 'preprocessors'. It combines the flexibility of traditional CSS preprocessors with the power of CSS-in-JS tools. We call it TS-in-CSS: Using TypeScript as a CSS preprocessor.
CSS preprocessors like SCSS are great, but with CSS getting more and more features, it's time for a new approach
to supercharge CSS. Developers figured out the typing and the programming part already ...with TypeScript.
So let's use TypeScript to write composable, maintainable styles.
Catch CSS errors at compile time with TypeScript's powerful type system. No more runtime surprises.
Get autocomplete, hover information, and inline documentation right in your editor as you type.
Share styles, selectors, themes like you are used to. And if you need, export them to JS with ease. All that with zero runtime.
If you already know CSS and TypeScript, you know Surimi. And if not, the information is just one hover away.
CSS is nice and (somewhat) simple. But it's lacking things we're used to in coding, like re-usable selectors,
compile-time and type safety, a direct JS interface, composability and other things that
make coding great.
This is how surimi solves these issues:
#container {
display: flex;
padding: 20px;
background-color: var(--bg-color);
}
#container > .button {
color: var(--primary-color);
}
#container > .button:hover {
color: var(--primary-hover-color);
}const container = select('#container').style({
display: 'flex',
padding: '20px',
backgroundColor: theme.colors.background,
});
container.child('.button')
.style({
color: theme.colors.primary,
})
.hover().style({
color: theme.colors.primaryHover,
});.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