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 をやめる方法。

明日やろう……。