Panda CSSとの付き合いを小説風に語る #PandaCSS

この記事はインフォ・ラウンジAdvent Calendar 2023 7日目の記事です

前回は @ituki_b さんの今年、マークアップ系の推しに:has()、:user-invalid、fieldsetタグが増えたので紹介したいでした。

プロローグ

この記事は、Panda CSSと私の出会いと紆余曲折（もそんなにない）を小説風に記したものであり、別段役に立つ記事ではない事を予めご了承いただければ幸いです。

初めての出会い

仕事でPanda CSSに初めて触れたのは今年（2023年）の夏ごろでした。
上司に紹介され、私たちは初めて出会いました。
それまでは名前すら知らなかったPanda CSS。
外ではけたたましくセミが鳴き、暑い夏でした。
私はエアコンの効いた部屋で「新しいと言ってもcssが書ける人なら問題ない、それにしてもパンダなんてふざけた名前」と独りごちながら、黙々と書いていました。
むしろサクサク書けることに対して謎の優越感すら感じていました。

<header
      className={css({
        position: "sticky",
        top: "0",
        left: "0",
        zIndex: "100",
        width: "100%",
        margin: "0",
        background: "#fff",
        boxShadow: "none",
        borderBottom: "1px solid #9a8a8",
        md: {
          borderBottom: "none",
          boxShadow: "0 4px 4px rgb(0,0,0,0.14)",
        },
        lg: {
          minWidth: "1024px",
        },
      })}
    >
      <div
        className={css({
          maxWidth: "2000px",
          margin: "0 auto",
        })}
      >
        省略
      </div>
    </header>

久々の再会

気付いたらセミの鳴き声は聞こえなくなっていましたが、2カ月経っても夏の暑さは続いていて、相変わらず私はエアコンの効いた部屋で黙々と仕事をこなす日々を過ごしていました。
そんな時「少し調整をお願いします」と上司から声が掛かり、PandaCSSと約2カ月ぶりの再会を果たすこととなりました。
仕事ではWordPressやVueなどを触る事の方が多いので、再会した時は「あぁPanda CSS・・・久しぶり」と人見知りの激しい私は素っ気ない態度を取ってしまいましたが、その後すぐにそんな態度は一変し、私は取り乱すこととなるのです。

「お前、どこの誰なんだよ！そしてお前はどこのどいつだ！」
気付くと声を荒げていました。
普段は声を荒げる事のない私からしたらとても珍しい事です。
ただ、その時は止めようがなかったのです。
なぜなら可読性が悪く、調整をしようにも要素を見つけるのにも一苦労なのです。
1つのコードにcssだけで5行程度使ってしまう事など当たり前なのです。コードが長く、可読性が悪くなってしまう事を想像してみてください。
その上Recipesは別に分けて書いているので、「あれ、お前のスタイルは他の部分で書いているのか」と舌打ちすることも度々でした。
あの時の私の心は荒み始めていました。

const filterRecipe = cva({
    base: {
      position: "fixed",
      top: "0",
      left: "50%",
      display: "none",
      width: "100%",
      height: "100vh",
      fontSize: "1.4rem",
      color: "#444",
      padding: "11px 0 19px",
      zIndex: "100",
      overflow: "auto",
      transform: "translateX(-50%)",
      borderRadius: "3px",
      boxShadow: "0 4px 4px rgb(0 0 0 / 0.14)",
      backgroundColor: "#fff",
      "&::webkit-full-page-media, :future, :root": {
        height: "100dvh",
      },
      md: {
        position: "absolute",
        top: "initial",
        width: "100%",
        height: "initial",
        padding: "30px 22px",
      },
      lg: {
        position: "absolute",
        left: "50%",
        width: "1000px",
        height: "initial",
        padding: "30px 22px",
      },
    },
    variants: {
      status: {
        open: {
          display: "block",
        },
      },
    },
  });

なぜ、めぐり逢ってしまうのか

再会から程なく、予期せぬ場所で見かけたPanda CSSは私が知っているPanda CSSではありませんでした。
従来のcssやscssのようにファイルが分かれていました。

└── src
     └── app
         └── hoge
             ├── page.tsx 
             └── styles.ts

page.tsx

import styles from "../hogen/styles";

export default function hogePage() {
    return (
        <div className={styles.container}>
            <div className={styles.currentYear({ cYear: "y" + String(gapMonth) as currentYearRange })}>
              <span className={styles.currentYearBorder}/>
              <span className={styles.currentYearLabel}>今日</span>
            </div>
        </div>
    )
}

styles.ts

import { css, cva } from "styled-system/css";
const headingW = "55px"
const tableW = "calc(100% - 55px)"

const styles = {
    container: css({
        position: "relative",
        display: "flex",
        alignItems: "stretch",
    }),
    以下省略
}

今まで私が触れてきたPanda CSSが嘘のように可読性の良く、ファイルが分けられていることにより、後々の管理もしやすいであろうことが手に取るように分かりました。
「(調整が必要になる)未来が怖くない…！」私はそう確信しました。

スタイル部分を別ファイル（上記の場合はstyles.ts）に分けることにより、スタイルで使用する変数も管理しやすくなり、スタイルは小さな変数単位で書くことにより、可読性も良くなります。

私は私ではない他の誰かが書いたそのPanda CSSを見て、嬉しくも有り悲しくもありました。
「Panda CSSとの未来を潰していたのは、他の誰でもなく自分自身ではないか」
「Panda CSSは初めから何も悪くなかった。考えが至らなかったのは自分のせいではないか」
己の非力さを思い知った瞬間です。
しかし、己の非力さという絶望の先に眩いばかりの光が見えるのを感じました。一足先に春の訪れ感じさせるような温かな光です。
手を伸ばせば、その手を透かすほどの希望の光です。

Panda CSSと上手く付き合えるようになると、それまでのわだかまりが嘘のように、キーボードの上を走る指は羽が生えたように軽やかに踊り、マークアップする際にコンポーネントを凄く意識するようになりました。
例えばよく見かけるサムネイル、見出し、抜粋が収められているカード型のレイアウト。
こういったものはカード、サムネイル、見出し、テキストで各変数を設けるのではなく、1つの変数に全て納めてしまうという方が可読性が上がるように感じました。

styles.ts

import { css } from "styled-system/css";


const styles = {
    card: css({
        border: "1px solid gray",
        borderRadius: "10px",
        backgroundColor: "#FFF",
        "& > figure": {
            textAlign: "center",
            "& > img": {
                width: "100%",
                height: "100%",
                objectFit: "contain",
            },
        },
        "& > h3": {
            fontWeight: 700,
            fontSize: "2rem",
            marginBottom: "20px",
            textAlign: "center",
        },
        "& > p": {
            fontSize: "1.6rem"
            padding: "0 20px",
        }
    }),
    以下省略
}

<article className={styles.card}>
    <figure>
        <img src={image} alt={alt} />
    </figure>
    <h3>Heading</h3>
    <p>text text text text text text</p>
</article>

私はこの時になって初めてPanda CSSに心を開いたのかもしれません。

エピローグ

元来、酷い人見知りの私は、心打ち解けた相手であってもある程度の月日が経つと、また人見知りが発動してしまう質である。
自分で言うのもなんだが、とても厄介だ。
そしてまた程なくして出会ったPanda CSSにも「またお前か」と言いつつも適度に距離を取りつつ接している。
その度に「前よりも美しく書きたい、可読性を良くしたい」と奮起するが「Recipesはどう扱うのが良いか」「共通のスタイルはどのように管理するのがベストなのか」と試行錯誤しては、理解しきれていない自分自身に疲弊し、たまには愚痴りたくもなる日もある。

気が付けば、Panda CSSと出会った頃の暑さは鳴りを潜め、上着無しでは外に出れないほど外を吹く風は冷たく、ピリピリと頬を撫でる。
Panda CSSの親に見つかり、そんな寒さとは裏腹にめちゃくちゃ変な汗をかいたのはここ数日内のできごとである。

あくまでネタとして小説風に書いているだけなので、普段仕事している時に声を荒げたり、己の非力さを目の当たりに絶望することはありません。

明日は @yuuya08110 さんの「与作フローチャートと、Neko Hacker - Endless Error Loop feat. ななひら」です。