typestyle

Making CSS type safe.

!Build Statustravis-imagetravis-url !NPM versionnpm-imagenpm-url
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 🌹reviews.

Overview

• Quickstart
• Guide: Pseudo Classes, Animations, Media Queries, Server side rendering
• Why

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 csx and tons of other goodness 🌹. Jump to the guidebook
book

Video Course

The guide contains everything you need to know. But if you prefer to watch video we have a free course up on eggheadcourse.
course

Why

You are probably here cause you are unhappy with your current workflow. So why not just jump to the guidebook and give it a go. If you still need reasons we have quite a fewwhy.