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

3 min read

目的

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 - 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.https://github.com/hiro0218/shokika.css#usage-with-css-in-js

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

const globalStyle = css`
  ${resetCSS}
`;

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

Related Articles

`<input type="range">`のstepを可変にする方法

仕様 / 完成デモ / 実装 / 参考

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメリット / 関連 / <h2 id="footnote-label" class="sr-only">Footnotes

竈門炭治郎をCSS Paint APIで再現する

概要 / 完成品 / 実装方法 / 〆 / 参考