TypeStyle
Making CSS type safe.
Writing CSS with TypeStyle will be just as fluent as writing JavaScript with TypeScript.
There are quite a few css in js frameworks out there. This one is different:
- Provides great TypeScript developer experience.
- No custom AST transform or module loader support needed.
- Works with any framework (react, angular2, cyclejs, whatever, doesn't matter).
- Zero config. Just use.
- super small (~6k gz)
This project is powered by github 🌟s ^ go ahead and star it please.
Checkout the awesome list of reviews 🌹.
Overview
Quickstart
Use it like you would use CSS modules or CSS in general with webpack etc, but this time you get to use TypeScript / JavaScript!
Install
npm install typestyle --save
Use
/** Import */
import {style} from "typestyle";
/** convert a style object to a CSS class name */
const className = style({color: 'red'});
/** Use the class name in a framework of choice */
// e.g. React
const MyButton =
({onClick,children})
=> <button className={className} onClick={onClick}>
{children}
</button>
// or Angular2
@Component({
selector: 'my-component',
template: `<div class="${className}">Tada</div>`
})
export class MyComponent {}Guide
We really really want to make CSS maintainable and simple. So we even wrote a free and open source book, covering the super simple core API, a handful of utility styles in typestyle/lib/csx and tons of other goodness 🌹. Jump to the guide
Video Course
The guide contains everything you need to know. But if you prefer to watch video we have a free course up on egghead.
Why
You are probably here cause you are unhappy with your current workflow. So why not just jump to the guide and give it a go. If you still need reasons we have quite a few.