Thinking with example

Card Componentを作ってみる

import React from "react";
import {render} from "react-dom";
import {Card} from "./card";

const title = "React and CSS";

render((
  <div>
    <Card title={title}>Hello, card component!</Card>
    <Card title={title} primary={true}>Hello, primary card!</Card>
  </div>
), document.getElementById("app"));

• propsにtitleとprimaryを渡せる
• childrenが子要素にrenderされる

Create component with JSX

React.Component を使ってComponentを作る:

import React from "react";
import cx from "classnames";

export class Card extends React.Component {
  render() {
    const {title, primary, children} = this.props;
    return (
      <div className={cx('card', {primary: primary})} >
         <header className="title">{title}</header>
         <div className="body">{children}</div>
      </div>
    );
  }
}

Write CSS

CSSはこんな感じ？

.card {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #f0f2fb;
  border-radius: 3px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16);
  margin-bottom: 30px;
}
.card .title {
  font-size: 18pt;
  margin-bottom: 10px;
}

.card.primary {
  background-color: #62c4a4;
  border: none;
  color: white;
}
.card.primary .title {
  font-weight: bold;
}

Example of Radium

Example of keyframes animation with Radium

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

Component with Radium

import React from "react";
import Radium from "radium";

@Radium
export class AnimatedCircle extends React.Component {
  render() {
    const { delay } = this.props;
    return (
      <div style={[styles.root, animation(delay)]}>
        <div style={styles.movable}>
          <div style={styles.circle}></div>
        </div>
      </div>
    );
  }
}

• Class Decorators(ES.next)を ComponentのClassに付与

• styleに配列が使えるように拡張される

• styleオブジェクトに":hover"が利用可能に

Style object with Radium

const height = "50px";

// アニメーションの定義
const translationKeyframes = Radium.keyframes({
  "0%":   {transform: "translateX(0%)"},
  "50%":  {transform: "translateX(100%)"},
  "100%": {transform: "translateX(0%)"},
}, "pulse");
const animation = (delay) =>({
  animation: `x 2.5s ease ${delay} infinite`,
  animationName: translationKeyframes,
});
const styles = {
  root: {
    position: "relative",
    width: "100%", height,
    marginBottom: "15px",
    ":hover": { /* :hover時のstyle */
      opacity: 0.6,
    },
  },
  movable: {
    position: "absolute",
    width: "100%",
    top: 0, bottom: 0,
  },
  circle: {
    backgroundColor: "#62c4a4",
    width: height, height,
    borderRadius: "25px",
  }
};

• Radium.keyframesでアニメーションを定義

• ':hover'をkeyとしてstyle定義

Wrap components by StyleRoot

import React from "react";
import ReactDom from "react-dom";
import { AnimatedCircle } from "./AnimatedCircle";
import { StyleRoot } from "radium";

ReactDom.render(
  <StyleRoot>
    <AnimatedCircle delay="0s"></AnimatedCircle>
    <AnimatedCircle delay=".3s"></AnimatedCircle>
    <AnimatedCircle delay=".6s"></AnimatedCircle>
  </StyleRoot>
, document.getElementById("app"));

• keyframesを利用するためにはStyleRootでラップするが必要ある

How to use CSS Modules

冒頭のCard ComponentをCSS Modulesで書き換えてみる

/* src/Card.css */
.root {
  background-color: #fff;
  :
}

.title {
  font-size: 18pt;
  :
}

/* src/Card.jsx */
import React from "react";
import * as st from "./Card.css"; // .cssからimport

export class Card extends React.Component {
  render() {
    const {title, children} = this.props;
    return (
      <div className={st.root} > {/* class名がexportされている */}
         <header className={st.title}>{title}</header>
         <div>{children}</div>
      </div>
    );
  }
}

RenderingされたDOMを開発者ツールで見てみると...

CSS Class名が書き換えられているのが確認できる

Using module bundler

CSS ModulesではModule bundlerのプラグインを利用する:

• .cssファイルのClass名を書き換えてglobalな名前が分からないようにする
• 同時に.jsで利用するkeyと実クラス名の紐付け情報を作成してModule bundlerに引き渡す

/* CSS Modules pluginが生成するmoduleイメージ */
module.exports = {
  "root": "_root_gub7p_1",
  :
};

With Browserify

css-modules/css-modulesify pluginが利用可能

npm i browserify babelify css-modulesify

browserify \
  -t [ babelify ] \
  -p [ css-modulesify -d dist/bundle.css ] \
  -d dist/bundle.js

NODE_ENV の値によって, 生成されるCSS Class名が異なる:

• デフォルト: prefixにlocal file pathが付与される

• production: suffixにfile hash付与される

With webpack

webpack公式のcss-loaderから利用可能 modules オプションでCSS Modulesとして解釈されるようになる

var path = require('path');
module.exports = {
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] },
      // postcssと併用する場合, importLoaders=1が必須
      { test: /\.css$/, loaders: ['style', 'css?modules&importLoaders=1', 'postcss'] },
    ],
  },
  postcss: [
    require('autoprefixer'),
  ],
  entry: './src/index.js',
  output: { path: path.resolve('dist'), filename: 'bundle.js' },
  resolve: { extensions: ['', '.js'] },
};

With TypeScript

• TypeScript 1.6以降ではJSXのコンパイルがサポートされている (tsc --jsx=react)
• Component名, Props名をCompile Checkしてくれる

TypeScriptでもCSS Modulesが使いたい

import * as React from "react";
import * as st from "./Card.css"; // compile errorに...

export interface CardProps { title: string; primary?: boolean}

export class Card extends React.Component<CardProps, {}> {
  render() {
    const {title, primary, children} = this.props;
    return (
      <div className={primary ? st.primaryRoot : st.root} >
         <header className={primary? st.primaryTitle : st.title}>{title}</header>
         <div>{children}</div>
      </div>
    );
  }
}

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;