typestyle-vp

Forked TypeStyle

Mainly for own projects.

See original project: https://www.npmjs.com/package/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
• 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 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.

Changelog

2.2.0

• new build script (webpack)
• join transform property into a string if it is an array. For example: {transform: ['scale(2)', 'rotate(25deg)']} convert to {transform: 'scale(2)rotate(25deg)'}