Vite + Svelte4でcssHashが使えなくなった

2024年5月12日日曜日

• Svelte

それとなくSvelte 4をインストールしたら見慣れぬ警告が表示されたのでメモっとく。

Svelteではコンポーネント単位でスタイルが適用されるように、記述したクラス名に加えて自動で(ランダムで)一意なクラス名を割り振ってくれる便利機能があります。その自動で生成してくれるクラス名を制御できるコンパイラオプションがcssHashです。

Svelte 3までは以下のようにvite.config.js(またはsvelte.config.js)のコンパイラオプションに指定することで適用することが出来ました。

export default defineConfig({
    ...
    plugins: [
        svelte({
            configFile: './svelte.config.js',
            compilerOptions: {
                cssHash: ({ css, hash }) => `m${hash(css)}`
            }
        })
    ],
    ...
});

しかし、Svelte 4以降ではビルド時に以下のような警告が表示され、強制的に無効化されてしまいました。

[vite-plugin-svelte] The following Svelte compilerOptions are controlled by vite-plugin-svelte and essential to its functionality. User-specified values are ignored. Please remove them from your configuration: cssHash

ググっても同じ問題に困っている人がいなさそうなのでおま環かも(SvelteKitに関するissueはみつかった)。ただSvelte 3では svelte-xxxxxx みたいに長くてSvelteだとすぐわかるクラス名だったのに対し、Svelte 4では s-xxxxxx のように短くなったので誰も気にしてないだけかもしれません。

解決法っぽいもの

ちょっと強引ですが、vite-plugin-svelteのdynamicCompileOptionsを使って強制的にコンパイラオプションをいじることで適用することが出来ます。ちなみにタイトルにもある通り Vite + Svelte 環境下における解法です。Svelte公式のチュートリアルに記載されている方法で環境構築した場合はSvelteKitになるので、この解決方法は使えません。

svelte.config.jsに以下のような設定を追加します。

export default {
    preprocess: vitePreprocess(),
    vitePlugin: {
        dynamicCompileOptions({ _, options }) {
            return {
                cssHash: ({ css, hash }) => `m${hash(css)}`,
                ...options
            };
        }
    }
}

dynamicCompileOptionsの第二引数にコンパイラオプションが渡されるので、それを書き換えることで設定を適用させます。

これで任意のクラス名を割り振ることが出来ますが、先にも書いた通りデフォルトで生成されるクラス名が簡潔になったのでcssHashの指定自体を消すのも悪くないと思います。