初めての方は初めまして❣ バ美肉VTuber夜御牧れるです。いや、まあ普段の活動とはあまり関係ないのですが。
@tailwindcss/postcss@4.1.18 を使おうと思ったら強制的にコメント除去がかかる問題に遭遇し、ちょっとした設定では回避できなかったのでプラグイン自作しました。仕組みは単純なので、CSS中のコメントを強制的に除去する他のプラグインからの保護にも使えるかと思います。……あるのか？
ライセンスは MIT-0 (=ほぼパブリックドメイン。違いは責任回避条項と著作権放棄を明言しない1ぐらい)です。
使い方
README.ja.mdに書いた通り。
npm install -D @ymmkrr/postcss-soft-comment-guard
import { wrapComments, unwrapComments } from '@ymmkrr/postcss-soft-comment-guard'
export default {
plugins: [
wrapComments(), // パイプラインの先頭に配置
// 他の PostCSS プラグイン
unwrapComments(), // パイプラインの末尾に配置
],
}
そもそも Tailwind CSS って何？
Tailwind CSSは、CSSを「小さなユーティリティの組み合わせ」で構築するという新しい発想を広めたフレームワークです。コンポーネントの見た目をHTMLやそれに近いレイヤーで完結させることで、複雑なCSSクラスの抽象化や命名から解放してくれます。
Bootstrap にも bg-dark (背景色指定) や mt-3 (余白指定) のようなユーティリティクラスはありますが、あくまで補助的な存在でした。
Tailwind CSS は、そのユーティリティクラスを主役として据え、デザインを小さなスタイルの組み合わせで構築するフレームワークです。必要であれば、Tailwind の上に従来のようなセマンティックな CSS レイヤーを追加することも可能です。
従来の HTML/CSS では、HTML からはできるだけデザイン要素を排し、CSS 側にスタイルを集約することが理想とされていました。
理想的な HTML では、要素には「button」「container」のような構造を表すセマンティックなクラス名を付け、CSS はその構造に沿ってデザインを当てる、というのが原則でした。
しかしながら CSS の継承システムは、プログラミングでよく見る「汎用ボタン → 送信ボタン」のような意味的な継承ではありません。HTML 上の包含関係に強く左右されます。
SASS や LESS といった CSSメタ言語の継承機能はセレクタを合成するだけで、CSS の継承モデルそのものを改善するものではありません。最終的にブラウザに表示される際は、依然としてHTML構造に引きずられる継承関係のままです。
古生代にはダイナミックHTMLとか呼ばれていた JavaScript は、今やフロントエンドの中心的な存在になりました。モダンな開発では、ページ全体を 1 枚のモノリシックな HTML として扱うのではなく単一責任原則に沿った小さなコンポーネントの組み合わせとして UI を構築するのが現代的です。
しかしそのような設計では、HTML上であるコンポーネントがどのような親要素の下に配置されるかを事前に予測することが難しくなります。条件分岐や再利用、動的なレイアウト変更によって DOM の構造が頻繁に変わるため、CSS の「包含関係に依存した継承モデル」とは相性が悪くなっていきました。
この結果、real world の CSS では
- クラス指定が不必要に多くなったり（セレクタの詳細度によって優先順位が決まる為）
- それを抑制しようとして今度はクラス名がやたら長くなったり（BEM等）
- Shadow DOM のようなやや複雑なカプセル化が採用されて外からスタイルをカスタマイズしにくくなっていたり
- 最終的には !important 乱舞になったり
しがちでした。
そこで Tailwind は、従来の「意味的な構造に基づくクラス名に従ってデザインを割り当てる」という前提そのものを“古い契約”として見直し、HTML に近いレイヤーでスタイルを完結させるアプローチを採用しています。
……で、この記事の本編とはあまり関係ないんですけどね。
続きは https://tailwindcss.com/ で❣
@tailwind/postcss@4.1.18 で発生した問題
強制的にコメント除去がかかり設定では無効化できない。
Tailwind はデフォルトで minify しますが、設定である程度無効化できます。
plugins: [
tailwindcss({
minify: false,
optimize: false,
}),
]
しかし、なぜか通常コメントだけは残してくれません。
Workaround
ぶっちゃけ拙プラグインを使わなくても PostCSS の設定ファイルにプラグインを書き込めば解消します。魔法はいらないがマジック文字列は必要になる。
/*! から始まるコメントはライセンス等を記載するための重要なものとされており、まともな minify 系ツールは明示的に指示しない限り削除しません。それを利用します。
MAGIC = '!!!D0-N07-R3M0V3!!!' // 1337言語
// ...
plugins: [
{
postcssPlugin: 'force-keep-comments',
Once(root) {
root.walkComments((comment) => {
if (!comment.text.startsWith('!')) {
comment.text = MAGIC + comment.text
}
})
}
},
tailwindcss({/* ... */}),
{
postcssPlugin: 'restore-guarded-comments',
OnceExit(root) {
root.walkComments((comment) => {
if (!comment.text.startsWith(MAGIC)) {
comment.text = comment.text.slice(MAGIC.length)
}
})
}
},
]
いやー NPM って割と簡単にパッケージ配布できるんですね。また一つ勉強になりました❣
-
MIT-0 や CC0 の条文は、日本のように著作権を放棄できない国でもその国の法制と矛盾しないように書かれています。CC0 には知的財産権の不行使特約がありますが、MIT-0 にはそれもありません。宗教上の思想としてはいつものように WTFPL で構わないんですが、MIT ブラ……おっと、ブランドとして扱うと異端になるんだった。世間的な信頼度の関係で MIT-0 を選択しました。 ↩