It's completed!

CSS in JS

Christopher Chedeau が2014年に発表
React: CSS in JS で一躍話題に

Example of Radium

Example of keyframes animation with Radium

Chromeの開発者ツールでstyle属性を見てみよう

Offline transformation

css-modules/postcss-modules を利用することで
CSS Modulesの事前変換が可能

/* styles.css */
.myClass {
  color:red;
}

/* converted_styles.css */
._myClass_xxx_yyy {
  color:red;
}

// converted_styles.json
{
  "myClass": "_myClass_xxx_yyy"
}

出力されたjsonから対応関係を参照することで
他言語(e.g. Ruby)からもCSS Modulesを利用できる

CSS Modulesから.css.d.tsを生成するツールを作りました

Quramy/typed-css-modules

/* Card.css */
.root { ... }

.title { ... }

// Card.css.d.ts
export const root: string;

export const title: string;