あまり知られていないかもしれない、CSS-in-JSを実装するライブラリでできる5つの便利なテクニック

Post on:2018年11月6日

はじめに

Reactには従来のCSSに加えて、スタイリングのオプションとして、インラインスタイルとCSS-in-JSがあります。

インラインスタイルでは、JavaScriptオブジェクトをstyle属性に渡すことができます。

const myStyle = {
  fontSize: 24,
  lineHeight: '1.3em',
  fontWeight: 'bold',
};

<span style={myStyle}>Hello World!</p>

const myStyle = {

fontSize: 24,

lineHeight: '1.3em',

fontWeight: 'bold',

};

<span style={myStyle}>Hello World!</p>

しかしながら、CSSのすべての機能がサポートされているわけではありません。

そして、CSS-in-JSはJavaScriptを使用してコンポーネントをスタイルするテクニックです。JavaScriptが解析されると、CSSが生成され（通常は<style>要素として）、DOMに付加されます。

この機能はサードパーティのライブラリによって実装されています。例えば、Aphroditeで実装された例を見てましょう。

import { StyleSheet, css } from 'aphrodite';
const styles = StyleSheet.create({
    myStyle: {
        fontSize: 24,
        lineHeight: '1.3em',
        fontWeight: 'bold',
    }
});

<span className={css(styles.myStyle)}>Hello World!</p>

import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({

myStyle: {

fontSize: 24,

lineHeight: '1.3em',

fontWeight: 'bold',

}

});

<span className={css(styles.myStyle)}>Hello World!</p>

私が推奨するライブラリは、下記の通りです。

CSS-in-JSを私は全面的に支持しているわけではありませんが、これらのライブラリは特定の状況で役立つ機能をサポートしてます。

この記事では、CSS-in-JSのあなたが知らなかったと思われる上記のライブラリでできる5つのテクニックについて説明します。

1. 他のスタイル付きコンポーネントを参照

Styled-Componentsやemotionのようなライブラリでは、ES6 Tagged Template Literalsを使ってスタイルからReactコンポーネントを作成することができます。

import styled from 'styled-components';
// Create a component that renders a <p> element with blue text
const BlueText = styled.p`
  color: blue;
`;

<BlueText>My blue text</BlueText>

import styled from 'styled-components';

// Create a component that renders a <p> element with blue text

const BlueText = styled.p`

color: blue;

ただし、CSSセレクタを使用していた場合など、他のスタイル付きコンポーネントをターゲットにすることもできます。

const ImportantText = styled.div`
   font-weight: bold;
`;

const Text = styled.div`
  color: gray;
  ${ImportantText} {
    font-style: italic;
  }
`;

render(
  <div>
    <Text>
      Text in gray
      <ImportantText>Important text in gray, bold and italic</ImportantText>
    </Text>
    <ImportantText>Important text bold</ImportantText>
  </div>
);

const ImportantText = styled.div`

font-weight: bold;

const Text = styled.div`

color: gray;

${ImportantText} {

font-style: italic;

}

render(

<div>

<Text>

Text in gray

<ImportantText>Important text in gray, bold and italic</ImportantText>

</Text>

<ImportantText>Important text bold</ImportantText>

</div>

);

これは例えば、ホバー時にコンポーネントのカラーを変更するなど、擬似クラスを組み合わせる場合に便利です。

const Text = styled.div`
  color: gray;
  &:hover ${ImportantText} {
    color: red;
  }
`;

const Text = styled.div`

color: gray;

&:hover ${ImportantText} {

color: red;

}

2. ライブラリの機能をJSSで拡張

Aphroditeを使ってアプリケーションのスタイルを設定し、テーマをサポートする必要があるとします。ここで問題になるのは、Aphroditeが簡単な方法でテーマをサポートしていないということです。少なくとも、emotionほど、簡単ではありません。

しかしながら、JSSのコアとAphroditeとのスタイル付きコンポーネントをつなぐ2つのプロジェクトがあります、aphrodite-jss、styled-jssです。

この方法でAphrodite（またはスタイル付きコンポーネント）の優れた部分はそのままで、すべての機能とJSSのプラグイン、キャッシュ（cache）から隔離（isolate）まで、そしてテーマ用に、テーマのパッケージなど、優れたコンポーネントを提供できます。

ThemeProvider

テーマオブジェクトをReactツリーに渡します。
withTheme

テーマオブジェクトとアップデートをプロパティとして受け取ることができます。

以下、例です。

const blackTheme = {
  color: 'black',
};

const App = () => (
  <ThemeProvider theme={blackTheme}>
    <MyComponent />
  </ThemeProvider>
);

const blackTheme = {

color: 'black',

};

const App = () => (

</ThemeProvider>

);

Aphroditeとテーマの特別なケースではもう一つの例として、スタイルを定義するときにテーマ情報にアクセスするために、AphroditeやJSSなどと相互に作用するreact-with-stylesを使用することもできます。

3. 複数のアニメーションをキーフレームで連結

インラインスタイルとは異なり、CSS-in-JSではキーフレームを使用してアニメーションを定義できます。スタイル付きコンポーネントでどのように実装できるか見てましょう。

const heightAnimation = keyframes`
  0% { height: 0;  }
  100% { height: 200; }
`;

const myComponent = styled.div`
  display: inline-block;
  width: 200;
  position: relative;
  animation-name: ${heightAnimation};
  animation-duration: 1.5s;
  animation-timing-function: ease;
`;

const heightAnimation = keyframes`

0% { height: 0; }

100% { height: 200; }

const myComponent = styled.div`

display: inline-block;

width: 200;

position: relative;

animation-name: ${heightAnimation};

animation-duration: 1.5s;

animation-timing-function: ease;

あまり知られていないのは、アニメーションのプロパティで複数のキーフレームオブジェクトを使用して複数のアニメーションを連結できることです。

この例では、2つのアニメーションを組み合わせています。

const heightAnimation = keyframes`
  0% { height: 0; }
  100% { height: 200; }
`;

const rotateAnimation = keyframes`
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
`;

const myComponent = styled.div`
  display: inline-block;
  width: 200;
  position: relative;
  animation: ${props => css`
    ${heightAnimation} 1.5s ease infinite,
    ${rotateAnimation} 1.5s linear infinite
  `}
`;

const heightAnimation = keyframes`

0% { height: 0; }

100% { height: 200; }

const rotateAnimation = keyframes`

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

const myComponent = styled.div`

display: inline-block;

width: 200;

position: relative;

animation: ${props => css`

${heightAnimation} 1.5s ease infinite,

${rotateAnimation} 1.5s linear infinite

RadiumはanimationNameプロパティの値としてキーフレームオブジェクトの配列を渡すことによって、複数のアニメーションをサポートするもう一つのライブラリです。

const heightAnimation = Radium.keyframes(
  {
    0% { height: 0; }
    100% { height: 200; }
  },
  'myHeightAnimation',
);

const rotateAnimation = Radium.keyframes(
  {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  },
  'myRotateAnimation',
);

const styles = {
  myStyle: {
    animationName: [heightAnimation, rotateAnimation],
    animationDuration: '1.5s, 1s',
    animationIterationCount: 'infinite, infinite',
    animationTimingFunction: 'ease, linear',
    display: inline-block;
    width: 200;
    position: relative;
  },
};

const heightAnimation = Radium.keyframes(

{

0% { height: 0; }

100% { height: 200; }

'myHeightAnimation',

);

const rotateAnimation = Radium.keyframes(

{

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

'myRotateAnimation',

);

const styles = {

myStyle: {

animationName: [heightAnimation, rotateAnimation],

animationDuration: '1.5s, 1s',

animationIterationCount: 'infinite, infinite',

animationTimingFunction: 'ease, linear',

display: inline-block;

width: 200;

position: relative;

};

4. グローバルスタイルを宣言

CSSのすべてはグローバルであり、CSS-in-JSを使用する目的の1つは、グローバルスタイルの定義を取り除くことです。ただし、ページ内のすべての要素に同じフォントスタイルを適用する場合など、グローバルスタイルを有効に使用することもできます。

もちろん、従来のCSSをいつでもWebpackでインポートしたり、index.htmlファイルで宣言したりすることもできます。

しかし、すべてのスタイルにJavaScriptを使用することを検討するなら、コンポーネントや拡張機能・プラグインを使ってグローバルスタイルを定義できるライブラリがあります。Radiumでは、Style Componentを使用して、スタイルされた要素をグローバルスタイルでレンダリングできます。
例を見てましょう。

<Style
  rules={{
    body: {
      fontFamily: 'Arial, Helvetica, sans-serif'
    }
  }}
/>

<Style

rules={{

body: {

fontFamily: 'Arial, Helvetica, sans-serif'

}

}}

上記のコードは、下記を返します。

<style>
body {
  font-family: 'Arial, Helvetica, sans-serif';
}
</style>

<style>

body {

font-family: 'Arial, Helvetica, sans-serif';

}

</style>

JSSではプラグインを使用して、グローバルスタイルを定義します。

<style>
body {
  font-family: 'Arial, Helvetica, sans-serif';
}
</style>

<style>

body {

font-family: 'Arial, Helvetica, sans-serif';

}

</style>

また、Aphroditeではサードパーティの拡張機能を使用します。

import {injectGlobalStyles} from "aphrodite-globals";

injectGlobalStyles({
    "body": {
          fontFamily: 'Arial, Helvetica, sans-serif',
    }
});

import {injectGlobalStyles} from "aphrodite-globals";

injectGlobalStyles({

"body": {

fontFamily: 'Arial, Helvetica, sans-serif',

}

});

あるいは、AphroditeのAPIのような機能を備えたaphrodite-jssというJSSのプラグインを使用します。

5. スタイルによるコンポーネントのテスト

一部のライブラリには、スタイルでコンポーネントをテストするためのユーティリティが含まれています.

Aphroditeは、非生産の環境（process.env.NODE_ENV !== 'production'）でのみ利用可能で、3つのメソッドを持っていますが、ドキュメント化されていない（少なくともこの執筆時点で）オブジェクトStyleSheetTestUtilsを提供しています。

suppressStyleInjection

DOMにスタイルが挿入されるのを防ぎます。DOMを持たないときに、Aphroditeコンポーネントの出力をテストしたいときに便利です。
clearBufferAndResumeStyleInjection

suppressStyleInjectionとは逆で、ペアにする必要があります。
getBufferedStyles

バッファリングされたスタイルの文字列を返します。

これらをどのように使用するのか、見てましょう。

import { StyleSheetTestUtils, css } from 'aphrodite';
//...

beforeEach(() => {
  StyleSheetTestUtils.suppressStyleInjection();
});

afterEach(() => {
  StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
});

test('my test', () => {
  const sheet = StyleSheet.create({
    background: {
      backgroundColor: 'blue'
    },
  });
  css(sheet.background);
  // buffer will contain something like [ ".background_k554e1{background-color:blue !important;}" ]
  const buffer = StyleSheetTestUtils.getBufferedStyles();
  // ...
});