gulp -> webpack css

_claude/notes/upgrade-plan.md

@@ -52,9 +52,27 @@ character of the site.
 ### Phase 1 — Build toolchain (in progress)
 - [x] Stand up `@wordpress/scripts` + webpack: `package.json` (build/start scripts + deps), `.babelrc`, `webpack.config.js` (browser-sync proxying `daw.stu:3030`), `src/` → `build/` seed
 - [x] `npm install` + `npm run build` verified (compiles `src/` → `build/index.js`). `npm start` wired (browser-sync `daw.stu:3030`), not yet run.
-- [ ] Port front-end CSS/JS into `src/` as the block templates need it (incremental, through Phases 2–4)
-
-**Decision (2026-06-15):** new toolchain runs **alongside** the legacy gulp/`v4-*` build, not replacing it yet — the live theme still enqueues `v4-style.min.css` / `v4-script.min.js`, so gulp stays dormant (deps kept) until block templates supersede those assets. **Retiring gulp + `v4-*` moves to Phase 5.** New source is isolated in `src/` → `build/` so it never collides with the 40 legacy files in `js/`.
+- [x] **CSS build → webpack** (2026-06-15): `v4-style.min.css` is now built by webpack — `src/legacy-style.js` imports the 5 sources in gulp's order → MiniCssExtractPlugin → theme root, `css-loader { url:false }` (keeps `fonts/…` paths), cssnano `discardComments.removeAll` (matches old clean-css). Faithful 1:1: 444 KB vs gulp 451 KB, fonts/sources/order intact, serves 200. **`style-min` enqueue unchanged.** The `cssf` → `v4-front.min.css` output was dead (nothing enqueues it) — skipped. ⚠️ **Don't run `gulp build`** now — it would overwrite `v4-style.min.css` with the (equivalent) clean-css version; webpack owns it. JS bundles still on gulp (`js`/`jsf`).
+- [ ] Port front-end JS into webpack incrementally as behaviors modernize (Phases 2–4)
+
+**Decision (2026-06-15):** new toolchain runs **alongside** the existing gulp build, not replacing it yet. **Gulp is still the active build** — it pulls vendor packages out of `node_modules` (bootstrap, jquery, fullcalendar, svg-morpheus, animate, …) and concats/minifies them with `style.css`/`styles.css` into the `v4-*.min.*` files the live theme enqueues (`gulp copy`/`mixin`/`build`/`js`/`jsf`/`cssf`). It keeps running normally; wp-scripts just adds a second, block-aware pipeline. **Retiring gulp + the `v4-*` outputs happens in Phase 5**, once block templates + `theme.json` supersede those assets. New source is isolated in `src/` → `build/` so it never collides with the legacy files in `js/`.
+
+**JS bundle audit (2026-06-15, corrected).** ⚠️ My first two broad greps were unreliable — **zsh doesn't word-split an unquoted file-list variable**, so the multi-file searches erred into false "unused." Re-audited with literal file args + context + DB content scan. Corrected result: **`scripts.js` is the plugin *library* the per-page scripts call into — mostly load-bearing, not dead.**
+
+- **KEEPERS (verified in use):**
+  - jQuery + bootstrap/Carousel — site-wide (jQuery via webpack `ProvidePlugin`)
+  - **WOW** — about, studio, art, desk
+  - **DrawFillSVG** — about, studio (animates the inline SVGs `#sv`, `#brain`, `#svg-device`…)
+  - **backstretch** — studio (`#studio-caro` hero background)
+  - **lazyload** — desk
+  - **js-cookie** (`Cookies`) — single
+  - **jQuery Validation** (`.validate()`) — WP comment form (`#commentform`) on single + about
+  - **Rainbow.js** — `code.js` defines the grammars; 20 posts use `data-language` (candidate to replace with a modern highlighter in Phase 4)
+  - **SVGMorpheus** — front-page only (icon morph)
+  - page scripts `about/studio/music/art/desk/contact/single/analytics/code.js` + `front-page.js`
+- **DROP (verified unused — 0 in page scripts, templates, content):** Typed.js, Formstone Wallpaper, smoothState, jQuery Waypoints, jquery.appear, **jquery-scrollto** (the `scrollTo` hits were native `$(window).scrollTop()`), Modernizr, fullcalendar, **ghembedder** (post 1341 cleaned; only a 2023 revision still references `.github-widget`).
+- **Implication → revised build rec:** most legacy plugins are in use *and* are exactly the ones slated for native/modern replacement in Phases 3–4 (WOW→IntersectionObserver/CSS, lazyload→`loading=lazy`, backstretch→CSS bg, Rainbow→Prism, comment validation→native). Porting them to webpack **now** is throwaway work. So: **port CSS to webpack now; leave JS on gulp** and migrate it to webpack incrementally as each behavior is modernized — don't reproduce the fragile jQuery-plugin bundle just to delete it.
+- **Reversibility:** nothing deleted — `scripts.js`/gulp/`v4-*` stay on disk + in git; enqueues switch only after page verification.
 
 ### Phase 2 — theme.json foundation
 - [ ] `theme.json` v3: layout, color palette, typography, spacing, element styles
@@ -89,4 +107,5 @@ character of the site.
 
 ## Changelog
 
+- **2026-06-15** — Fixed intermittent **stuck loader** (reported on Studio). Cause: `#loader` was hidden only by per-page `$(window).bind('load', …fadeOut)` with no fallback — if a resource hung (Studio backstretches `camera.mp4`) or `load` already fired, it stuck forever. Fix: `loader.php` now hides the preloader itself in vanilla JS (runs in the header, before `load`), with a `setTimeout` fail-safe (6s) + `readyState` check. The per-page `fadeOut` bindings in `studio/about/art/desk.js` are now redundant (harmless; clean up when those scripts are modernized in Phases 3–4). Not caused by the CSS build change — pre-existing.
 - **2026-06-15** — Plan created; dependencies documented; decisions locked (FSE / wp-scripts / bespoke homepage).

package.json

@@ -25,6 +25,8 @@
     "browser-sync": "^3.0.4",
     "browser-sync-webpack-plugin": "^2.4.0",
     "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "mini-css-extract-plugin": "^2.9.0",
     "style-loader": "^4.0.0",
     "webpack": "^5.85.0",
     "webpack-cli": "^5.1.1",

src/legacy-style.js

@@ -0,0 +1,17 @@
+/**
+ * Reproduces the gulp `build` task → v4-style.min.css (the site-wide stylesheet).
+ *
+ * Imports the same files in the same order gulp concatenates them; webpack's
+ * MiniCssExtractPlugin emits one stylesheet to the THEME ROOT as v4-style.min.css,
+ * so the existing `style-min` enqueue keeps working unchanged.
+ *
+ * css-loader runs with { url: false } so the `url('fonts/…')` paths in fonts.css
+ * and style.css are left exactly as-is — they resolve from the theme root, same as
+ * the gulp output. This is a faithful 1:1 of the old build (prune the dead inputs —
+ * e.g. fullcalendar — in Phase 5, not here).
+ */
+import '../css/fonts.css';
+import '../css/v4-animate.css';
+import '../css/v4-fullcalendar.css';
+import '../css/styles.css';
+import '../style.css';

webpack.config.js

@@ -1,23 +1,31 @@
 /**
  * Build config for the v0.5.0 FSE migration (@wordpress/scripts + webpack).
  *
- * New theme source lives in src/ and compiles to build/ — kept separate from the
- * legacy gulp pipeline (js/v4-*, style.min.css) which still serves the live site
- * until the block templates supersede it (see _claude/notes/upgrade-plan.md).
+ * Phase 1 (CSS): webpack now produces the site-wide stylesheet `v4-style.min.css`
+ * (the old gulp `build` task). The legacy gulp pipeline still handles the JS bundles
+ * for now — those migrate later, as their jQuery-era behaviors get modernized during
+ * the template phases (see _claude/notes/upgrade-plan.md).
  *
- * Custom-block entries (blocks/<name>/index.js) get added here as we build them
- * out in Phase 4, mirroring the srh theme.
+ * Output layout (output.path = theme root so nothing escapes it):
+ *   - JS            → build/[name].js   (src/index.js seed; block view scripts later)
+ *   - v4-style      → v4-style.min.css  (theme root — keeps the `style-min` enqueue + font url()s valid)
+ *   - other CSS     → build/[name].css
  */
 const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
 
 module.exports = {
   entry: {
     index: './src/index.js',
+    // Reproduces gulp `build` → v4-style.min.css (concat of the 5 CSS sources, in order).
+    'v4-style': './src/legacy-style.js',
   },
   output: {
-    path: path.resolve(__dirname, 'build'),
-    filename: '[name].js',
+    path: path.resolve(__dirname),     // theme root
+    filename: 'build/[name].js',        // JS bundles live under build/
+    clean: false,                       // NEVER clean — output.path is the theme root
   },
   module: {
     rules: [
@@ -28,11 +36,30 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+        use: [
+          MiniCssExtractPlugin.loader,
+          // url:false / import:false → leave url() + @import untouched (gulp-concat parity,
+          // so the relative `fonts/…` paths keep resolving from the theme root).
+          { loader: 'css-loader', options: { url: false, import: false } },
+        ],
       },
     ],
   },
+  optimization: {
+    // '...' keeps webpack's default JS minifier (terser); add CSS minification.
+    minimizer: [
+      '...',
+      // discardComments.removeAll matches the old gulp clean-css (specialComments:0).
+      new CssMinimizerPlugin({
+        minimizerOptions: { preset: ['default', { discardComments: { removeAll: true } }] },
+      }),
+    ],
+  },
   plugins: [
+    new MiniCssExtractPlugin({
+      filename: ({ chunk }) =>
+        chunk.name === 'v4-style' ? 'v4-style.min.css' : 'build/[name].css',
+    }),
     new BrowserSyncPlugin({
       host: 'daw.stu',
       port: 3030,