Astro で Stylify CSS を使う

# Stylify CSS について

TailwindのようなCSSフレームワークだが、クラス名がインラインCSSのような書き方で、新たな学習コストが小さい。例えば以下のように書ける。

```html:sample (開発環境)
<h1 class="font-size:24px color:blue hover:color:lightblue lg:font-size:32px">
	Hello World!🎉
</h1>
```

さらに、プロダクションにデプロイする際にクラス名を圧縮してくれる(マングリング/Mangling)。個人的にここが気に入った。

```html:sample (プロダクション環境)
<h1 class="a b c d">
	Hello World!🎉
</h1>
```

その他たくさんサンプルがあるが、公式に丸投げ。

https://stylifycss.com

# 環境

- Node v20.6.0
- Astro v3.0.6
- Stylify v0.6.2

# 空の Astro を作成

```bash:terminal
npm create astro@latest
# Where should we create your new project?       -->  ./sample
# How would you like to start your new project?  -->  Empty
# Install dependencies?                          -->  Yes
# Do you plan to write TypeScript?               -->  No
# Initialize a new git repository?               -->  No
```

# Stylify CSS をインストール

```bash:terminal
npm install @stylify/astro
```

# astro.config.mjs を編集

```javascript:astro.config.mjs
import { defineConfig } from 'astro/config';
import stylify from '@stylify/astro';

export default defineConfig({
    integrations: [stylify()],
});
```

# src/pages/index.astro を編集

```html:index.astro
---
---
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<title>Astro x Stylify</title>
	</head>
	<body>
		<h1 class="margin:2rem font-family:serif color:blue">
            Astro x Stylify
        </h1>
	</body>
</html>
```

# ページ確認

```bash:terminal
cd sample
npm run dev
```

http://localhost:4321/ にアクセス。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91276/93ca2bb4-7dcd-7888-1671-3925c347b24b.png)

`src/styles/stylify.css` が自動生成される。マングリングはデフォルトではオフなので、以下のようにそのまま出力される。

```css:src/styles/stylify.css
.color\:blue{
	color: blue
}
.font-family\:serif{
	font-family: serif
}
.margin\:2rem{
	margin: 2rem
}
```

# マングリングをオンにする

```javascript:astro.config.mjs
import { defineConfig } from "astro/config";
import stylify from "@stylify/astro";

export default defineConfig({
    integrations: [
        stylify({
            compiler: {
                mangleSelectors: true,
            },
        }),
    ],
});
```

開発環境ではマングリングは発生しないので特に何も起こらないが、ビルド時にマングリングが発生する。


このあと間違え……、いや、実験で、 `astro build` (`npm run build`) してみたところ、マングリングが実行され、`src` 内の `.astro` や `.css` ファイル内のクラスが全て圧縮された。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91276/9a399346-13e4-d080-1e31-3fa24de221be.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91276/3c677c78-6f2c-711c-4ff1-2099d9143cdc.png)

# デプロイされた html を確認

デプロイ時に出力された `dist/index.html` を見ると、マングリングが実行されクラス名が圧縮されていることを確認できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91276/a5cd4a95-f169-b929-5248-430a39d04795.png)

さらにプロジェクトに [astro-compress](https://www.npmjs.com/package/astro-compress) をインストールして、完全な1行出力にした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91276/806e13c8-f768-d24f-abca-3c1117b1a45b.png)

これでもかというくらいに圧縮された。ここまでやってしまうとほぼ自己満足の領域だ。

# おわり

学習曲線はたしかに低いと思うが、やはりところどころ調べないといけないところはある。あと `margin:2rem_auto` や `font-family:^Arial^` など、スペースをアンダースコアに置き換えたり、クオーテーションをハット記号に置き換えるあたりは、やや見慣れず最初受け入れがたいかもしれない。

クラス名を短くするという試みはあまり見たことがない(知らないだけ？)。なんにせよ HTML のサイズが圧縮され、その作業に手間もかからないというのはよいことだと思う。極小ながらパフォーマンス改善にも寄与する。