TypeStyle


> Making CSS type safe.

[![Build Status][travis-image]][travis-url]
[![NPM version][npm-image]][npm-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
``tsx
/* 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})
=>
{children}

// or Angular2
@Component({
selector: 'my-component',
template:


})
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 guide][book]

![][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 egghead][course].

![][course]

Why

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

[free-style]:https://github.com/blakeembrey/free-style
[travis-image]:https://travis-ci.org/typestyle/typestyle.svg?branch=master
[travis-url]:https://travis-ci.org/typestyle/typestyle
[npm-image]:https://img.shields.io/npm/v/typestyle.svg?style=flat
[npm-url]:https://npmjs.org/package/typestyle
[types.ts]:https://github.com/typestyle/typestyle/blob/master/src/types.ts
[csx]:https://github.com/typestyle/typestyle#csx
[book]:https://typestyle.github.io
[course]:https://egghead.io/courses/maintainable-css-using-typestyle
[why]:https://typestyle.github.io/#/why
[reviews]:https://typestyle.github.io/#/reviews