diff --git a/.claude/skills/eccube-asset/SKILL.md b/.claude/skills/eccube-asset/SKILL.md new file mode 100644 index 0000000000..0b6d1fe9b6 --- /dev/null +++ b/.claude/skills/eccube-asset/SKILL.md @@ -0,0 +1,118 @@ +--- +name: eccube-asset +description: EC-CUBE 4.4 のフロントエンドアセット(SCSS / JS バンドル)をビルド・改修するときの規約。「スタイルを変えて」「CSSを直して」「scssを編集して」「デザインを調整して」「JSを追加して」「アセットをビルドして」などと言われたとき、または html/template 配下の scss・js/bundle.js・esbuild.config.mjs を作成・編集するときに使用する。生成物(css / min.css / map / html/bundle)は git 管理されているため、ソースだけコミットすると実機に反映されない。 +--- + +# アセットビルド規約(EC-CUBE 4.4) + +## 対象 + +- **ソース**: `html/template/{default,admin}/assets/scss/**/*.scss`(`install` に scss は無い), + `html/template/{default,admin,install}/assets/js/bundle.js` +- **ビルド定義**: `esbuild.config.mjs`, `package.json` +- **生成物(すべて git 管理下)**: `html/template/{default,admin}/assets/css/` の `style.*` / `app.*` / `bootstrap.*` + (`.css` + `.min.css` + 各 `.map`), `html/bundle/{front,admin,install}.bundle.js` / `*.map`, `html/bundle/ace/` +- **`css/` に混在する非生成物**: `install/assets/css/dashboard.css` と `admin/assets/css/tempusdominus-bootstrap-4*.css` + は対応する scss が無い**手管理ファイル**。再ビルドしても更新されないので、`css/` 配下すべてを生成物と扱わない + +## 基本ルール + +- **生成物は git 管理されている。ソースだけコミットしても実機には反映されない。** + `.scss` を変更したら必ずビルドし、生成された `css/` 配下も同じコミットに含める。 +- **生成された `css/` を直接編集しない。** 次のビルドで上書きされて消える。変更は必ず `scss/` 側へ。 + ただし上記の**手管理ファイルは例外**で、対応する `scss/` が無いため直接編集する(ビルドでは更新されない)。 +- **`.map` も追跡対象**(`style.css.map` 等)。生成物一式をコミットする。 +- ビルドは `npm run build`(= `node esbuild.config.mjs`)。**1 回で SCSS → `.css` / `.min.css` と + JS バンドルまで通る**ので、片方だけ更新されることはない。監視ビルドは `npm start`(`--watch`)。 +- **CI は生成物の鮮度を検査しない。** ソースと生成物の不一致は自動検出されないため、 + コミット前に自分で `git status` を確認する(下記「実行・確認方法」)。 + +### 変換パイプライン(`esbuild.config.mjs` の実装) + +| 処理 | 入力 | 出力 | 内容 | +|---|---|---|---| +| SCSS | `html/template` 配下を再帰探索して見つけた `_` 始まり**でない** `*.scss` | 同階層の `css/` へ `*.css` + `*.min.css` + 各 `.map` | `sass-embedded` → postcss(`autoprefixer` / `postcss-sort-media-queries`(mobile-first))。1 エントリを expanded と compressed で 2 回ビルドする | +| JS | `html/template/{default,admin,install}/assets/js/bundle.js` | `html/bundle/{front,admin,install}.bundle.js` + `.map` | esbuild(`bundle` / `minify` / `target: es2018` / `sourcemap`)。CommonJS 対応で `global` を `window` に読み替える | +| 画像・フォント | JS / CSS から参照される `.png` `.svg` `.woff2` 等 | バンドルに埋め込み | `dataurl` ローダ(webpack の url-loader 相当) | +| ace エディタ | `node_modules/ace-builds/src-min-noconflict` | `html/bundle/ace/` | **使うものだけの allowlist** をコピー(毎回ディレクトリを作り直す) | + +押さえるべき点が 3 つある。 + +- **SCSS のエントリは自動検出**。`html/template` 配下を歩いて `_` で始まらない `.scss` を全部エントリ扱いする。 + つまり**部分ファイルは必ず `_` 始まりにする**。忘れると単独の CSS として出力され、余計な生成物が増える。 +- **CSS は JS から `