2025-03 package updates

package.json

@@ -27,82 +27,82 @@
     ">= 1% in US"
   ],
   "devDependencies": {
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
-    "@storybook/addon-a11y": "^8.1.6",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
+    "@storybook/addon-a11y": "^8.6.6",
     "@storybook/addon-actions": "^8.1.6",
     "@storybook/addon-docs": "^8.1.6",
-    "@storybook/addon-essentials": "^8.1.6",
-    "@storybook/addon-links": "^8.1.6",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/addon-essentials": "^8.6.6",
+    "@storybook/addon-links": "^8.6.6",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
     "@storybook/blocks": "^8.1.6",
     "@storybook/preview-api": "^8.1.6",
     "@storybook/react": "^8.1.6",
-    "@storybook/react-webpack5": "^8.1.6",
+    "@storybook/react-webpack5": "^8.6.6",
     "@storybook/theming": "^8.1.6",
-    "@swc/cli": "^0.5.0",
-    "@swc/core": "^1.4.6",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
-    "autoprefixer": "^10.4.17",
-    "chalk": "^5.3.0",
-    "concurrently": "^9.0.1",
-    "core-js": "^3.36.0",
+    "@swc/cli": "^0.6.0",
+    "@swc/core": "^1.11.10",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.26.1",
+    "@typescript-eslint/parser": "^8.26.1",
+    "autoprefixer": "^10.4.21",
+    "chalk": "^5.4.1",
+    "concurrently": "^9.1.2",
+    "core-js": "^3.41.0",
     "css-loader": "^7.1.2",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-webpack-plugin": "^4.1.0",
+    "eslint-import-resolver-typescript": "^3.9.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-webpack-plugin": "^4.2.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
-    "glob": "^11.0.0",
-    "inquirer": "^9.2.16",
+    "glob": "^11.0.1",
+    "inquirer": "^9.3.7",
     "js-yaml-loader": "^1.2.2",
     "mkdirp": "^3.0.1",
     "nani": "^3.2.3",
-    "postcss": "^8.4.33",
+    "postcss": "^8.5.3",
     "postcss-loader": "^8.1.1",
-    "postcss-selector-parser": "^7.0.0",
-    "prettier": "^3.2.5",
-    "react-refresh": "^0.14.0",
-    "sass-loader": "^16.0.0",
+    "postcss-selector-parser": "^7.1.0",
+    "prettier": "^3.5.3",
+    "react-refresh": "^0.16.0",
+    "sass-loader": "^16.0.5",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.2.1",
-    "stylelint-config-sass-guidelines": "^12.0.0",
+    "stylelint": "^16.16.0",
+    "stylelint-config-sass-guidelines": "^12.1.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-prettier": "^5.0.0",
-    "stylelint-webpack-plugin": "^5.0.0",
+    "stylelint-prettier": "^5.0.3",
+    "stylelint-webpack-plugin": "^5.0.1",
     "svgo-loader": "^4.0.0",
     "swc-loader": "^0.2.6",
-    "ts-loader": "^9.5.1",
+    "ts-loader": "^9.5.2",
     "twig-drupal-filters": "https://github.com/kmonahan/twig-drupal-filters/archive/d2410657fbee6bde3bc2b60ab0fe5d777d4c98c0.tar.gz",
     "twig-loader": "https://github.com/fourkitchens/twig-loader/archive/6f04fedf24f13b69b62c457f971d80b06522ed34.tar.gz",
-    "typescript": "^5.4.2",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4",
+    "typescript": "^5.8.2",
+    "webpack": "^5.98.0",
+    "webpack-cli": "^6.0.1",
     "webpack-merge": "^6.0.1"
   },
   "dependencies": {
     "@drupal/once": "^1.0.1",
-    "html-react-parser": "^5.1.9",
-    "mini-css-extract-plugin": "^2.7.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "html-react-parser": "^5.2.2",
+    "mini-css-extract-plugin": "^2.9.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "remove-files-webpack-plugin": "^1.5.0",
-    "sass-embedded": "^1.72.0",
-    "storybook": "^8.1.6",
+    "sass-embedded": "^1.85.1",
+    "storybook": "^8.6.6",
     "svg-sprite-loader": "^6.0.11",
     "svg-transform-loader": "^2.0.13",
-    "terser-webpack-plugin": "^5.3.10",
+    "terser-webpack-plugin": "^5.3.14",
     "twig": "^1.17.1",
-    "yaml": "^2.3.4"
+    "yaml": "^2.7.0"
   }
 }

source/01-global/00-colors/color.scss

@@ -36,8 +36,9 @@ $swatch-padding: 1rem;
 }
 
 .gesso-storybook-color-swatch__hex {
-  font-family: Menlo, Consolas, 'Lucida Console', 'Liberation Mono',
-    'Courier New', monospace, sans-serif;
+  font-family:
+    Menlo, Consolas, 'Lucida Console', 'Liberation Mono', 'Courier New',
+    monospace, sans-serif;
   font-size: rem(14px);
 }
 

source/03-components/dropbutton/dropbutton.scss

@@ -4,8 +4,8 @@
 @use 'sass:math';
 @use '00-config' as *;
 
-$dropbutton-toggle-height: gesso-line-height(base) * rem(gesso-base-font-size()) +
-  2 * rem(gesso-spacing(1)) !default;
+$dropbutton-toggle-height: gesso-line-height(base) *
+  rem(gesso-base-font-size()) + 2 * rem(gesso-spacing(1)) !default;
 $dropbutton-toggle-width: 2em !default;
 $dropbutton-toggle-icon-size: rem(12px) !default;
 

source/03-components/form-item/form-item--checkbox/_form-item--checkbox.scss

@@ -29,8 +29,9 @@
         margin-inline-end: 0.6em;
         text-indent: 0.15em;
         transition-duration: gesso-duration(short);
-        transition-property: background-color, border-color, box-shadow, color,
-          opacity, text-shadow, transform;
+        transition-property:
+          background-color, border-color, box-shadow, color, opacity,
+          text-shadow, transform;
         transition-timing-function: gesso-easing(ease-in-out);
         vertical-align: middle;
         width: rem(20px);

source/06-utility/build-test/Component-tsx.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import moduleJS from './_module-js';
 
 function ComponentTsx(): JSX.Element {

source/06-utility/build-test/script-ts.ts

@@ -1,8 +1,9 @@
-import ReactDom from 'react-dom';
+import ReactDom from 'react-dom/client';
 import React from 'react';
 import ComponentJsx from './Component-jsx';
 
-ReactDom.render(
-  React.createElement(ComponentJsx),
-  document.getElementById('root-ts')
+const root = ReactDom.createRoot(
+  document.getElementById('root-ts') as HTMLElement
 );
+
+root.render(React.createElement(ComponentJsx));

source/07-react/Example/Example.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 
 import styles from './Example.module.scss';
 import { EXAMPLE_PROPERTY } from '../constants';

source/07-react/index.tsx

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 // Lazy load components so we only load the JS we need.
 const Example = lazy(() => import('./Example/Example'));
@@ -30,11 +30,11 @@ function waitForBlock(selector: string): Promise<HTMLElement | void> {
 
 waitForBlock('some-id-to-hydrate').then(container => {
   if (container) {
-    ReactDOM.render(
+    const root = ReactDOM.createRoot(container);
+    root.render(
       <Suspense fallback={<div>Loading...</div>}>
         <Example />
-      </Suspense>,
-      container
+      </Suspense>
     );
   }
 });