Fixes and improvements

Author: DanielCliftonGuardian

dotcom-rendering/.storybook/main.ts

@@ -4,6 +4,7 @@ import { transpileExclude, getLoaders } from '../webpack/webpack.config.client';
 import { saveStories } from '../scripts/gen-stories/get-stories.mjs';
 import type { StorybookConfig } from '@storybook/react-webpack5';
 import { svgr } from '../webpack/svg.cjs';
+import process from 'node:process';
 
 // Generate dynamic Card and Layout stories
 saveStories();
@@ -14,7 +15,6 @@ const config: StorybookConfig = {
 		backgrounds: true,
 		controls: true,
 		viewport: true,
-		toolbars: true,
 	},
 
 	stories: [
@@ -32,7 +32,6 @@ const config: StorybookConfig = {
 	addons: [
 		'@storybook/addon-webpack5-compiler-swc',
 		'@storybook/addon-docs',
-		'@storybook/addon-a11y',
 		'@storybook/addon-backgrounds',
 	],
 
@@ -55,8 +54,9 @@ const config: StorybookConfig = {
 		// e.g process?.env?.SOME_VAR
 		config.plugins?.push(
 			new webpack.DefinePlugin({
-				process: JSON.stringify({
-					env: { SDC_URL: process.env.SDC_URL },
+				'process.env': JSON.stringify({
+					SDC_URL: process.env.SDC_URL,
+					HOSTNAME: process.env.HOSTNAME ?? 'localhost',
 				}),
 			}),
 			// We rely on Buffer for our bridget thrift client

dotcom-rendering/package.json

@@ -130,7 +130,6 @@
 		"lz-string": "1.5.0",
 		"mockdate": "3.0.5",
 		"node-fetch": "3.3.2",
-		"path-browserify": "1.0.1",
 		"postcss-styled-syntax": "0.6.3",
 		"preact": "10.15.1",
 		"preact-render-to-string": "6.0.2",

dotcom-rendering/src/lib/braze/forceBrazeMessage.ts

@@ -1,17 +1,7 @@
-const runtimeHostname = (): string | undefined => {
-	if (typeof process !== 'undefined' && process.env.HOSTNAME) {
-		return process.env.HOSTNAME;
-	}
-	if (typeof window !== 'undefined' && window.location.hostname) {
-		return window.location.hostname;
-	}
-	return undefined;
-};
-
 const FORCE_BRAZE_ALLOWLIST = [
 	'preview.gutools.co.uk',
 	'preview.code.dev-gutools.co.uk',
-	runtimeHostname(),
+	process.env.HOSTNAME ?? 'localhost',
 	'm.thegulocal.com',
 ];
 

dotcom-rendering/src/lib/fonts-css.ts

@@ -265,5 +265,3 @@ export const rawFontsCss = fontList
 `,
 	)
 	.join('\n');
-
-export const fontsCss = rawFontsCss;

dotcom-rendering/src/server/htmlPageTemplate.ts

@@ -4,7 +4,7 @@ import CleanCSS from 'clean-css';
 import he from 'he';
 import { ASSET_ORIGIN } from '../lib/assets';
 import { escapeData } from '../lib/escapeData';
-import { fontsCss as rawFontsCss } from '../lib/fonts-css';
+import { rawFontsCss } from '../lib/fonts-css';
 import type { Guardian } from '../model/guardian';
 import type { Config } from '../types/configContext';
 import { GIT_COMMIT_HASH } from './prout';
@@ -57,6 +57,8 @@ const fontPreloadTags = fontFiles
 	)
 	.join('\n');
 
+const minifiedFontsCss = new CleanCSS().minify(rawFontsCss).styles;
+
 export const htmlPageTemplate = (props: WebProps | AppProps): string => {
 	const {
 		css,
@@ -392,7 +394,7 @@ https://workforus.theguardian.com/careers/product-engineering/
 						: ''
 				}
                 ${scriptTags.join('\n')}
-				<style class="webfont">${new CleanCSS().minify(rawFontsCss).styles}</style>
+				<style class="webfont">${minifiedFontsCss}</style>
                 <style>${resets.resetCSS}</style>
 				${css}
 				<link rel="stylesheet" media="print" href="${ASSET_ORIGIN}static/frontend/css/print.css">

dotcom-rendering/tsconfig.json

@@ -24,6 +24,9 @@
 			"webpack-env",
 			"youtube",
 			"twitter-for-web",
+			// This is to fix a "Cannot find namespace 'Chai'" error that arose during
+			// the upgrade to Storybook 9. Storybook uses vitest, which has chai as a
+			// dependency, and this makes the chai types available globally.
 			"chai"
 		]
 	},

package.json

@@ -25,12 +25,12 @@
 	},
 	"dependencies": {
 		"@guardian/prettier": "5.0.0",
+		"@types/chai": "5.2.2",
 		"chromatic": "13.3.0",
 		"husky": "9.1.7",
 		"lint-staged": "15.2.0",
 		"prettier": "3.0.3",
-		"tslib": "2.6.2",
-		"@types/chai": "5.2.2"
+		"tslib": "2.6.2"
 	},
 	"packageManager": "[email protected]",
 	"pnpm": {