From fde26efa1b2a4fd8c6ce49355d4302e44d0ade75 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Wed, 13 Dec 2023 10:31:05 +0000
Subject: [PATCH] Throw errors when CSS custom properties are missing

---
 .../src/govuk/components/header/header.mjs             | 10 +++++++++-
 .../govuk-frontend/src/govuk/components/tabs/tabs.mjs  | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/header/header.mjs b/packages/govuk-frontend/src/govuk/components/header/header.mjs
index 2914c19e86..005a599ed3 100644
--- a/packages/govuk-frontend/src/govuk/components/header/header.mjs
+++ b/packages/govuk-frontend/src/govuk/components/header/header.mjs
@@ -96,10 +96,18 @@ export class Header extends GOVUKFrontendComponent {
    * @private
    */
   setupResponsiveChecks() {
+    const breakpointProperty = '--govuk-frontend-breakpoint-desktop'
     const breakpointValue = getComputedStyle(document.body).getPropertyValue(
-      '--govuk-frontend-breakpoint-desktop'
+      breakpointProperty
     )
 
+    if (!breakpointValue) {
+      throw new ElementError({
+        componentName: 'Header',
+        identifier: `CSS custom property (\`${breakpointProperty}\`)`
+      })
+    }
+
     // Media query list for GOV.UK Frontend desktop breakpoint
     this.mql = window.matchMedia(`(min-width: ${breakpointValue})`)
 
diff --git a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
index 3f61d32d2d..292c64eef8 100644
--- a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
+++ b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
@@ -105,10 +105,18 @@ export class Tabs extends GOVUKFrontendComponent {
    * @private
    */
   setupResponsiveChecks() {
+    const breakpointProperty = '--govuk-frontend-breakpoint-tablet'
     const breakpointValue = getComputedStyle(document.body).getPropertyValue(
-      '--govuk-frontend-breakpoint-tablet'
+      breakpointProperty
     )
 
+    if (!breakpointValue) {
+      throw new ElementError({
+        componentName: 'Tabs',
+        identifier: `CSS custom property (\`${breakpointProperty}\`)`
+      })
+    }
+
     // Media query list for GOV.UK Frontend tablet breakpoint
     this.mql = window.matchMedia(`(min-width: ${breakpointValue})`)