CSS Modules を PureScript のプロジェクトでためした。そして現状失敗している。
postcss 経由で CSS Modules を試そうとしたのだけど Parcel が邪魔してうまくいかなかった。
PureScript のモジュールを生成するところはうまくいく。
const fs = require('fs'); const path = require('path'); const saveStyleModule = ({ srcDir, moduleNameSuffix }) => { return (cssFileName, json) => { const cssDir = path.dirname(cssFileName); const cssName = path.basename(cssFileName, '.css'); const baseModuleNames = path.relative(srcDir, cssDir).split(path.sep); if (baseModuleNames.length > 0 && baseModuleNames[0] === '..') return; const moduleName = cssName + moduleNameSuffix; const pursFilePath = path.resolve(cssDir, moduleName + '.purs'); const entries = Object .keys(json) .sort() .map((key) => ({ key, value: json[key] })); const purs = [ 'module ' + baseModuleNames.concat([moduleName]).join('.') ].concat( ' ( ' + entries.map((i) => i.key).join('\n , ') + '\n ) where' ).concat( entries.map(({ key, value }) => { return [ '', key + ' :: String', key + ' = "' + value + '"' ].join('\n'); }) ).join('\n'); fs.writeFileSync(pursFilePath, purs, { encoding: 'utf-8' }); }; }; const mySaveStyleModule = saveStyleModule({ srcDir: path.resolve('./src'), moduleNameSuffix: 'Style' }); module.exports = { plugins: [ require('postcss-modules')({ getJSON: (cssFileName, json, _outputFileName) => { return mySaveStyleModule(cssFileName, json); } }) ] };
問題は Parcel が↑の postcss.config.js を解釈して余計な動きをしてしまうこと。Parcel で変換を無効化する方法を調べてみたのだけど出てこない。いくつかの方法をためしたのだけど今日は時間切れ。
まだ試していない方法もある。別のディレクトリに postcss.config.js を置いて Parcel から隠しつつ postcss-cli の --config で指定する方法。 postcss.config.js を使わずに postcss を使うスクリプトを書く方法。 Parcel をやめる方法。
明日やろう……。
