PostCSS/setup.js

必要なプラグインのリストを入力として、PostCSS の手順を自動生成するスクリプトは実用的です。 Node.js を使ったシンプルなスクリプトとして以下のコードを提案します。

setup.js

const fs = require('fs');
const path = require('path');

// 必要なプラグインリストを入力
const plugins = [
  "postcss-import",
  "postcss-simple-vars",
  "autoprefixer",
  "cssnano"
];

// ctx.env による設定のデフォルト値
const envConfigs = {
  development: {
    map: { inline: false },
    plugins: {
      "cssnano": false,
    },
  },
  production: {
    map: false,
    plugins: {
      "cssnano": { preset: "default" },
    },
  },
};

// .postcssrc.js ファイル生成
const generatePostCSSConfig = (plugins, envConfigs) => {
  const pluginConfig = plugins.reduce((acc, plugin) => {
    acc[plugin] = plugin === "cssnano" ? envConfigs.production.plugins[plugin] : {};
    return acc;
  }, {});

  const content = `module.exports = (ctx) => ({
  parser: false,
  stringfier: false,
  map: ctx.env === 'development' ? ${JSON.stringify(envConfigs.development.map)} : ${JSON.stringify(envConfigs.production.map)},
  plugins: ${JSON.stringify(pluginConfig, null, 2)},
});`;

  fs.writeFileSync('.postcssrc.js', content, 'utf8');
  console.log('.postcssrc.js has been generated!');
};

// npm インストールコマンド生成
const generateNPMInstallCommand = (plugins) => {
  const command = <code>npm i -D ${plugins.join(' ')}</code>;
  console.log("Run the following command to install plugins:");
  console.log(command);
};

// Makefile の生成
const generateMakefile = () => {
  const makefileContent = `build:
\tnpx postcss --env production src/css/main.css -o css/main.css`;
  fs.writeFileSync('Makefile', makefileContent, 'utf8');
  console.log('Makefile has been generated!');
};

// ディレクトリ構成の生成
const generateDirectoryStructure = () => {
  const dirs = [
    'src/css',
    'css',
    'node_modules',
  ];

  dirs.forEach((dir) => {
    fs.mkdirSync(dir, { recursive: true });
  });

  fs.writeFileSync(path.join('src/css', 'main.css'), '', 'utf8');
  console.log('Directory structure has been created!');
};

// 実行
generatePostCSSConfig(plugins, envConfigs);
generateNPMInstallCommand(plugins);
generateMakefile();
generateDirectoryStructure();

このスクリプトは以下のように動作します：

1. プラグインリストの設定: 必要な PostCSS プラグインを配列で指定。
2. .postcssrc.js の生成: ctx.env に基づいて development と production の動作を設定。
3. npm インストールコマンドの生成: 指定したプラグインを npm i -D コマンドでインストール。
4. Makefile の生成: PostCSS コマンドを実行するためのシンプルな Makefile を作成。
5. ディレクトリ構成のセットアップ: 必要なディレクトリ（例: src/css）と空の main.css を作成。

実行方法

1. 上記のスクリプトを setup.js などの名前で保存。
2. Node.js がインストールされている環境で以下を実行：

   node setup.js
   

3. 必要なファイル・フォルダが生成され、次に実行すべきコマンド（npm インストール）が出力されます。

このスクリプトを改良して柔軟性を高めたり、プラグインごとに独自の設定を追加することも可能です！