[CSS in JS] 外部のリセットCSSを使う方法

目的

CSS in JS でも外部のリセット CSS のパッケージを利用したい。

課題

CSS in JS に渡すスタイル定義は string である必要がある。

例えば、下記のように PostCSS などでやっていたような@importを使うことができない。

// こういうことはできない
<Global style={`@import 'normalize.css';`} />

fs.readFileSyncを利用し、/node_modules/内のリセット CSS ファイルを読み込んでstringの形で CSS in JS に渡せば利用は可能である。ただ、クライアントでは事前にビルドをする仕組みを作る必要がでてきてしまうし、サーバサイド上でやるしかない。

import fs from "fs";
const resetCSS = fs.readFileSync(
  "node_modules/normalize.css/normalize.css",
  "utf8"
);

render(
  <Global
    styles={css`
      ${resetCSS}
    `}
  />
);

存在する解決方法

emotion-resetなど Emotion 用（CSS in JS）にリセットを提供するライブラリはある。ただ、リセット CSS 本体の更新が追いつかない懸念あり。

import { Global, css } from "@emotion/react";
import emotionReset from "emotion-reset";

render(
  <Global
    styles={css`
      ${emotionReset}
    `}
  />
);

おまけ

拙作のリセット CSS は、CSS の更新に追随できるように string な CSS 定義を export するようにした。
先述の「事前にビルドをする仕組み」を持っているような状態。

github.comGitHub - hiro0218/shokika.css: A lightly modern reset CSS.A lightly modern reset CSS. Contribute to hiro0218/shokika.css development by creating an account on GitHub.

import { css, Global } from "@emotion/react";
import resetCSS from "shokika.css/dist/string";

const globalStyle = css`
  ${resetCSS}
`;

export const CSSReset = () => <Global styles={globalStyle} />;