scss -> webpack + bootstrap 5.3

_claude/notes/dependencies.md

@@ -21,7 +21,7 @@ and decide each one's fate during the v0.5.0 FSE migration. Status legend:
 | ~~jasny-bootstrap~~ | ~~^4.0.0~~ | — | **REMOVED 2026-06-16** — fully unused; offcanvas is BS5-native (`data-bs-toggle`, `.offcanvas-end`, `--bs-offcanvas-*`). jasny was never bundled by gulp and referenced nowhere but package.json. (Vestigial `.navmenu` class still on the `<nav>` in `header-home/studio.php` — harmless leftover, clean up later.) |
 | svg-morpheus | ^0.3.0 | homepage icon morph (`front-page.js`) | **Keep** — tied to the bespoke homepage we're preserving |
 | animate.css | ^4.1.1 | scroll animations (WOW) | **Drop?** — prefers-reduced-motion + CSS |
-| fullcalendar | ^5.11.3 | calendar (desk/now?) | **Audit** — confirm which page still renders it |
+| fullcalendar | ^5.11.3 | **About page calendar** — `about.js:120` `new FullCalendar.Calendar(#calendar)`, `page-about.php:167` `<div id="calendar">` | **KEEP** (verified in use). v6 is a breaking API change — defer that upgrade to its own focused task |
 
 ## 2. npm — dev (`package.json` › devDependencies)
 
@@ -90,5 +90,7 @@ belong to Gravity Forms — informs the **Drop?** calls on jquery-validation + S
 
 - **Definitely carry forward:** Matomo, svg-morpheus (homepage), `front-page.css`, davo-bot widget loader, `dw-guten` meta sidebar.
 - **Replace with platform:** gulp→wp-scripts, jQuery→vanilla, `loop.js`→Query Loop block, mediaelement→core/native, most CSS→`theme.json`.
-- **Confirm-then-drop:** terminal.js, messenger, modernizr, jasny-bootstrap, animate.css, jquery-validation, Stripe v2, moment/fullcalendar.
-- **Audit features before deciding:** Twilio call/SMS/chat, simple_html_dom, the per-page JS, icon fonts.
+- **Verified KEEP (in use — don't drop):** fullcalendar (About calendar), animate.css (via WOW), jquery-validation (comment forms), WOW, DrawFillSVG, backstretch, lazyload, js-cookie, Rainbow, svg-morpheus.
+- **Confirm-then-drop (verified unused in the JS audit):** terminal.js, messenger, modernizr, Stripe v2, typed.js, smoothState, jquery-waypoints, jquery.appear, jquery-scrollto. (~~jasny-bootstrap~~ **removed 2026-06-16**.)
+- **Audit features before deciding:** Twilio call/SMS/chat, simple_html_dom, icon fonts, `moment.min.js` (FullCalendar v5 doesn't need it — check other uses).
+- ⚠️ **Audit caution:** broad greps here have repeatedly produced false negatives (zsh word-split on unquoted file-list vars; case-sensitivity, e.g. `FullCalendar`). Verify each candidate case-insensitively with literal file args, and trust David's knowledge of what's used.

_claude/notes/upgrade-plan.md

@@ -70,7 +70,7 @@ character of the site.
   - **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`).
+- **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, **ghembedder** (post 1341 cleaned; only a 2023 revision still references `.github-widget`). [**fullcalendar is NOT droppable** — used on the About page calendar; my earlier "0 usage" was a case-sensitivity miss (`FullCalendar.Calendar`).]
 - **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.
 
@@ -107,5 +107,7 @@ character of the site.
 
 ## Changelog
 
+- **2026-06-16** — **CSS pipeline fully on webpack.** Wired `sass-loader` (`implementation: require('sass')`, `quietDeps`) so webpack compiles `styles.scss` directly (Bootstrap + bootstrap-icons from `node_modules`) instead of importing the gulp-compiled `styles.css`. gulp's `mixin` / CSS `copy` / `build` / `cssf` are now **fully superseded** — `styles.css` is an orphaned artifact (source of truth = `styles.scss`). Then **upgraded Bootstrap 5.2.3 → 5.3.8** (flows straight through the webpack sass compile; bundle 440→470 KB from 5.3's color-mode vars). Removed `jasny-bootstrap` (unused). **Visual verification pending.** Next dep upgrades (bootstrap-icons, animate.css) flow the same way. gulp still owns JS bundles until the JS migration; once that's done, gulp goes entirely.
+
 - **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).

css/styles.scss

@@ -105,3 +105,14 @@ $offcanvas-vertical-height: 100px !important;
 
 $bootstrap-icons-font-dir: "/wp-content/themes/daw/fonts";
 @import '../node_modules/bootstrap-icons/font/bootstrap-icons.scss';
+
+
+/***********************************************************
+##################### Overrides ############################
+************************************************************/
+
+// Bootstrap 5.3 changed .table to default --bs-table-bg to --bs-body-bg
+// (it was transparent in 5.2). Keep the About icon grid transparent.
+.table.icons {
+  --bs-table-bg: transparent;
+}

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.5.0",
       "dependencies": {
         "animate.css": "^4.1.1",
-        "bootstrap": "^5.2.3",
+        "bootstrap": "^5.3.8",
         "bootstrap-icons": "^1.10.2",
         "fullcalendar": "^5.11.3",
         "jquery": "^3.6.1",
@@ -40,6 +40,7 @@
         "gulp-uglify": "^3.0.2",
         "mini-css-extract-plugin": "^2.9.0",
         "sass": "^1.56.1",
+        "sass-loader": "^17.0.0",
         "streamqueue": "^1.1.2",
         "style-loader": "^4.0.0",
         "webpack": "^5.85.0",
@@ -4273,9 +4274,10 @@
       "license": "MIT"
     },
     "node_modules/@popperjs/core": {
-      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
       "peer": true,
       "funding": {
         "type": "opencollective",
@@ -8962,6 +8964,47 @@
         "node": ">=8"
       }
     },
+    "node_modules/@wordpress/scripts/node_modules/sass-loader": {
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.8.tgz",
+      "integrity": "sha512-hcov4ZwZJIGbEuyNr9EmiTmZueyrxSToE6GOzoZnq5JM7ecRO7ttyvilPn+VmRsqiP16+VYZzVnGZj/hzZgKBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@wordpress/scripts/node_modules/semver": {
       "version": "7.8.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.4.tgz",
@@ -10756,9 +10799,9 @@
       "license": "ISC"
     },
     "node_modules/bootstrap": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
-      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "version": "5.3.8",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
+      "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
       "funding": [
         {
           "type": "github",
@@ -10769,8 +10812,9 @@
           "url": "https://opencollective.com/bootstrap"
         }
       ],
+      "license": "MIT",
       "peerDependencies": {
-        "@popperjs/core": "^2.11.6"
+        "@popperjs/core": "^2.11.8"
       }
     },
     "node_modules/bootstrap-icons": {
@@ -26612,16 +26656,13 @@
       }
     },
     "node_modules/sass-loader": {
-      "version": "16.0.8",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.8.tgz",
-      "integrity": "sha512-hcov4ZwZJIGbEuyNr9EmiTmZueyrxSToE6GOzoZnq5JM7ecRO7ttyvilPn+VmRsqiP16+VYZzVnGZj/hzZgKBA==",
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-17.0.0.tgz",
+      "integrity": "sha512-0Ybm8ohBQ9LcrycVrFQp/KQBNX5a3Wda9/smS0mE/xLffzEnwvV8nykOzrbiSWNzTE3IB/jiXx8O4QmDPG2+Gw==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "neo-async": "^2.6.2"
-      },
       "engines": {
-        "node": ">= 18.12.0"
+        "node": ">= 22.11.0"
       },
       "funding": {
         "type": "opencollective",
@@ -26629,7 +26670,6 @@
       },
       "peerDependencies": {
         "@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0",
-        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
         "sass": "^1.3.0",
         "sass-embedded": "*",
         "webpack": "^5.0.0"
@@ -26638,9 +26678,6 @@
         "@rspack/core": {
           "optional": true
         },
-        "node-sass": {
-          "optional": true
-        },
         "sass": {
           "optional": true
         },
@@ -34823,9 +34860,9 @@
       "dev": true
     },
     "@popperjs/core": {
-      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "peer": true
     },
     "@prisma/instrumentation": {
@@ -38162,6 +38199,15 @@
             "type-fest": "^0.8.1"
           }
         },
+        "sass-loader": {
+          "version": "16.0.8",
+          "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.8.tgz",
+          "integrity": "sha512-hcov4ZwZJIGbEuyNr9EmiTmZueyrxSToE6GOzoZnq5JM7ecRO7ttyvilPn+VmRsqiP16+VYZzVnGZj/hzZgKBA==",
+          "dev": true,
+          "requires": {
+            "neo-async": "^2.6.2"
+          }
+        },
         "semver": {
           "version": "7.8.4",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.4.tgz",
@@ -39387,9 +39433,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
-      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "version": "5.3.8",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
+      "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
       "requires": {}
     },
     "bootstrap-icons": {
@@ -50420,13 +50466,11 @@
       }
     },
     "sass-loader": {
-      "version": "16.0.8",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.8.tgz",
-      "integrity": "sha512-hcov4ZwZJIGbEuyNr9EmiTmZueyrxSToE6GOzoZnq5JM7ecRO7ttyvilPn+VmRsqiP16+VYZzVnGZj/hzZgKBA==",
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-17.0.0.tgz",
+      "integrity": "sha512-0Ybm8ohBQ9LcrycVrFQp/KQBNX5a3Wda9/smS0mE/xLffzEnwvV8nykOzrbiSWNzTE3IB/jiXx8O4QmDPG2+Gw==",
       "dev": true,
-      "requires": {
-        "neo-async": "^2.6.2"
-      }
+      "requires": {}
     },
     "sax": {
       "version": "1.6.0",

package.json

@@ -35,6 +35,7 @@
     "gulp-uglify": "^3.0.2",
     "mini-css-extract-plugin": "^2.9.0",
     "sass": "^1.56.1",
+    "sass-loader": "^17.0.0",
     "streamqueue": "^1.1.2",
     "style-loader": "^4.0.0",
     "webpack": "^5.85.0",
@@ -42,7 +43,7 @@
   },
   "dependencies": {
     "animate.css": "^4.1.1",
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.10.2",
     "fullcalendar": "^5.11.3",
     "jquery": "^3.6.1",

src/legacy-style.js

@@ -13,5 +13,5 @@
 import '../css/fonts.css';
 import '../css/v4-animate.css';
 import '../css/v4-fullcalendar.css';
-import '../css/styles.css';
+import '../css/styles.scss';
 import '../style.css';

webpack.config.js

@@ -43,6 +43,23 @@ module.exports = {
           { loader: 'css-loader', options: { url: false, import: false } },
         ],
       },
+      {
+        // styles.scss @imports Bootstrap + bootstrap-icons from node_modules — webpack
+        // now compiles it (replaces gulp's `mixin` task). quietDeps silences Bootstrap's
+        // internal sass deprecation noise; url:false keeps the bootstrap-icons font path.
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: 'css-loader', options: { url: false, import: false } },
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: require('sass'),
+              sassOptions: { quietDeps: true },
+            },
+          },
+        ],
+      },
     ],
   },
   optimization: {