PureScriptでViteのCSSModuleサポートを使う
この記事は PureScript - Qiita Advent Calendar 2024 の8日目の記事です。 PureScriptでViteのCSSModuleを使う方法を解説していきます。 ViteでCSSModuleを使うにはJSファイルからimport文を使ってCSSをインポートするコードを書くことによって、CSSModuleを使うことができます。具体的なコードは次の通りです。 .foo { display: flex; } import styles from './styles.module.css' export const Foo = () => { return <div className=`${styles.foo}`></div> } しかし、PureScriptから直接 css ファイルをインポートする方法が存在しないので、このような直接的なアプローチでCSSModuleを使うことはできません。 そこで、PureScriptの FFI を用いてCSSをインポートするJSコードをPureScriptから呼び出すことでこの問題を回避することができます。 // Styles.js import st from './styles.module.css' export const styles = (name) => st[name] -- Styles.Purs module Components.Foo.Styles where foreign import styles :: String -> String -- 利用側 module Components.Foo where import Components.Foo.Styles as Styles -- | Viteで解決したCSSModuleの加工されたClassNameが取得できる style :: String style = Styles "foo" これで spago build 自体は成功するのですが、viteでのモジュール解決が突破できません。viteはoutputディレクトリのspagoによってビルドされたファイルを見ますが、 spago build がやってくれるのはあくまでPureScriptのコンパイルとFFI用のJSをoutputディレクトリに配置してくれるだけで、CSSファイルは配置してくれないからです。
Posted