typestyle / css-to-typestyle

Convert raw CSS to TypeStyle

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

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.

css-to-typestyle's Issues

Generate const variable assignments + style all for classes?

Hi, I tried this out last night and noticed it converts everything to cssRule() calls. I was just wondering: Have you written anything that converts only the global css element rules (not classes) to use cssRule and converts all class rules to variable assignments or know of a way we could?

For example,

.display-block {
  display: block;
}

would, ideally, be converted to:

export const DISPLAY_BLOCK = style({
  display: 'block',
})

I'm sure this is much more difficult, but I'm just asking, because I've been working on converting several thousand lines of CSS from a library into TypeStyle styles, and it's taking me a very long time. So, I'm just wondering whether or not you think we could come up with something that could accomplish this.