Blowfishテーマで古いブラウザにCSSが適用されない問題と対処法

Blowfishテーマで生成したCSSが古いブラウザで適用されない問題と、その原因と対処法をまとめました。

環境
#

Windows 11
Git Bash
Hugo v0.150.0
Blowfish v2.90.0
Node.js v22.19.0
iPhone 7 (iOS 15 Safari)

現象
#

Blowfishテーマで生成されたCSSがiOS 15 Safariなど古いブラウザで正しく適用されません。
具体的には、以下のようなスタイルが無視されます。

CSS
.prose {
  :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }
}

原因
#

Tailwindによって生成されるCSSはネスト構文を利用しています。
しかし、iOS 15 Safariなど古いブラウザはCSS Nestingのサポートが不完全です。
そのため、.prose { :where(p) { … } }のようなネストを正しく解釈できず、スタイルが無効化されます。

対処
#

1. 必要なパッケージをインストール
#

プロジェクトルートで以下を実行します。

Bash
npm install --save-dev tailwindcss @tailwindcss/postcss postcss postcss-cli autoprefixer postcss-nesting cross-env

2. PostCSS設定ファイルを作成
#

postcss.config.jsをプロジェクトルートに追加します。

postcss.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/postcss')('./themes/blowfish/tailwind.config.js'),
    require('autoprefixer'),
    require('postcss-nesting'),
  ],
};

3. package.jsonにスクリプトを追加
#

package.json
{
  "scripts": {
    "dev": "cross-env NODE_ENV=development postcss themes/blowfish/assets/css/main.css -o assets/css/compiled/main.css -w",
    "build": "cross-env NODE_ENV=development postcss themes/blowfish/assets/css/main.css -o assets/css/compiled/main.css"
  }
}

4. CSSをビルド
#

Bash
# 開発用ウォッチ
npm run dev

# 本番用ビルド
npm run build

assets/css/compiled/main.cssに出力され、Hugoの優先順位でテーマ同梱のCSSを上書きします。
ネストがフラット化されるため、古いブラウザでも.prose :where(p)のようなセレクタが解釈されます。

参考
#

著者

prata0x

Game programmer

環境#

現象#

原因#

対処#

1. 必要なパッケージをインストール#

2. PostCSS設定ファイルを作成#

3. package.jsonにスクリプトを追加#

4. CSSをビルド#

参考#

関連記事