この記事の概要
巷で話題のRemixですが、スタイリングに関する記事はあまり見当たりません。
そのため自分で調査してまとめてみました。
まだ変化も大きいと思いますが、直近で導入を考えている人にとって役立てば幸いです。
公式ドキュメントにある情報
主な方法
Remixは<link rel="stylesheet">の形式でスタイルを読み込み、適用するのが基本方針のようです。
以下の2つの方法が示されていますが、自前のスタイルを一切書かなくて済むサイトは少ないでしょう。
というわけで、実質的に2番目の方法は必須だと思われます。
- リモートのスタイルシートを用いる
- 通常のスタイルシートを用いる
リモートのスタイルシートを用いる
公式ドキュメントから例を拝借します。
import type { LinksFunction } from "remix";
export const links: LinksFunction = () => {
return [
{
rel: "stylesheet",
href: "https://unpkg.com/modern-css-reset@1.4.0/dist/reset.min.css"
}
];
};
例が示しているように、実質reset系のCSSやCSSフレームワークなど、サイト全域で使うものを指定することになるんだと思います。
もちろんroot.tsx以外でもこの書き方自体はできます。
ですが、importするだけして未使用だった場合に警告は出ないなど管理が煩雑になる印象しかありませんでした。
通常のスタイルシートを用いる
- CSSファイルを作成する
- 各コンポーネントのファイルで
styleをimport - 各コンポーネントのファイルで
function links()としてexport - 各ページのファイルで
links as XXLinksといった形式でimport - 各ページのファイルの
links()内で、スプレッド構文でXXLinksを展開
結構大変なのですが、イメージがつきづらい気がするので自分で試していたときのコードを載せます。
いくつかのコンポーネントを作り、それらをimportしてページを作る、という至って普通のシーンなのですが……。
import { ComponentPropsWithRef, forwardRef } from "react";
import styles from "~/styles/footer.css";
type Props = {
className?: string;
} & ComponentPropsWithRef<"footer">;
export const links = () => [{ rel: "stylesheet", href: styles }];
export const Footer = forwardRef<HTMLElement, Props>(
({ className, ...props }, ref) => {
return (
// 省略
);
}
);
stylesファイルに作成したCSSをimportしつつ、このコンポーネントからもexportしています。
import { Header, links as headerLinks } from "~/components/RegularStylesheets/Header";
import { Navigation, links as navigationLinks } from "~/components/RegularStylesheets/Navigation";
import { FeedItem, links as feedItemLinks } from "~/components/RegularStylesheets/FeedItem";
import { Ranking, links as rankingLinks } from "~/components/RegularStylesheets/Ranking";
import { Footer, links as footerLinks} from "~/components/RegularStylesheets/Footer";
import globalStyles from "~/styles/global.css";
import pageStyles from "~/styles/page.css"
export function links() {
return [
{ rel: "stylesheet", href: globalStyles },
...headerLinks(),
...navigationLinks(),
...feedItemLinks(),
...rankingLinks(),
...footerLinks(),
{ rel: "stylesheet", href: pageStyles },
];
}
export default function SomePage() {
return (
// 省略
);
}
それぞれのコンポーネントで定義したlinksをasを使って別名でimportし、links()の中で展開しています。
コンポーネントが増える度にこちらの指定も増えるので、大した手間では無いものの面倒くさいのは否めません。
あと、これはあくまでimportやexportの仕方であってクラス名の衝突を防ぐのは自分で頑張る必要があります。
この方法のときはRemixが面倒を見てはくれません。
Tailwind CSS
現状ではTailwindで書くのが唯一の方法な印象です。
1番導入が楽で、挙動の怪しい箇所も無さそうでした。
JITモードやapplyを使うかどうかはチームのルール次第なのでここでは触れません。
styled-components
動くと言えば動きますが、全体的に怪しいです。
まず、公式にあるexampleの通りだと読み込み時に一瞬ちらつきが発生します。
styleに埋め込まれるはずの文字列が一瞬画面全体に描画されてしまいました。
| リロードを繰り返している様子 |
|---|
 |
色々調べた末、こちらのGistを参考にして書いたら一応チラつきは改善されました。
ですが……Prop `className` did not match. Server: "foo" Client: "bar"をwarningが出るようになってしまい最終的に解決まで至れませんでした……。
一応、今私が書いたコードを置いておきます。
究明まで至れずすみません。
import { renderToString } from "react-dom/server";
import { RemixServer } from "remix";
import type { EntryContext } from "remix";
import { ServerStyleSheet } from "styled-components";
import StylesContext from "./StylesContext";
export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
const sheet = new ServerStyleSheet();
try {
let html = renderToString(
sheet.collectStyles(
<StylesContext.Provider value={null}>
<RemixServer context={remixContext} url={request.url} />
</StylesContext.Provider>
)
);
const styles = sheet.getStyleTags();
html = html.replace("</head>", `${styles}</head>`);
responseHeaders.set("Content-Type", "text/html");
return new Response("<!DOCTYPE html>" + html, {
status: responseStatusCode,
headers: responseHeaders,
});
} catch (error) {
console.log(error);
} finally {
sheet.seal();
}
}
PostCSS
あくまでautoprefixerなどの付与がメインだと思うので今回は検証していません。
挙がっているIssueなど
調査をする中で見つけたIssueを貼っておきます。
styled-componentsでのチラつきの話はRemix側にもstyled-components側にもIssueが立っており、まだ解決できなさそうな雰囲気を感じています。
Remix
styled-components
vanilla-extract
stitches