Stylify CSS について
TailwindのようなCSSフレームワークだが、クラス名がインラインCSSのような書き方で、新たな学習コストが小さい。例えば以下のように書ける。
<h1 class="font-size:24px color:blue hover:color:lightblue lg:font-size:32px">
Hello World!🎉
</h1>
さらに、プロダクションにデプロイする際にクラス名を圧縮してくれる(マングリング/Mangling)。個人的にここが気に入った。
<h1 class="a b c d">
Hello World!🎉
</h1>
その他たくさんサンプルがあるが、公式に丸投げ。
環境
- Node v20.6.0
- Astro v3.0.6
- Stylify v0.6.2
空の Astro を作成
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 をインストール
npm install @stylify/astro
astro.config.mjs を編集
import { defineConfig } from 'astro/config';
import stylify from '@stylify/astro';
export default defineConfig({
integrations: [stylify()],
});
src/pages/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>
ページ確認
cd sample
npm run dev
http://localhost:4321/ にアクセス。
src/styles/stylify.css が自動生成される。マングリングはデフォルトではオフなので、以下のようにそのまま出力される。
.color\:blue{
color: blue
}
.font-family\:serif{
font-family: serif
}
.margin\:2rem{
margin: 2rem
}
マングリングをオンにする
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 ファイル内のクラスが全て圧縮された。
デプロイされた html を確認
デプロイ時に出力された dist/index.html を見ると、マングリングが実行されクラス名が圧縮されていることを確認できる。
さらにプロジェクトに astro-compress をインストールして、完全な1行出力にした。
これでもかというくらいに圧縮された。ここまでやってしまうとほぼ自己満足の領域だ。
おわり
学習曲線はたしかに低いと思うが、やはりところどころ調べないといけないところはある。あと margin:2rem_auto や font-family:^Arial^ など、スペースをアンダースコアに置き換えたり、クオーテーションをハット記号に置き換えるあたりは、やや見慣れず最初受け入れがたいかもしれない。
クラス名を短くするという試みはあまり見たことがない(知らないだけ？)。なんにせよ HTML のサイズが圧縮され、その作業に手間もかからないというのはよいことだと思う。極小ながらパフォーマンス改善にも寄与する。