Throw errors when CSS custom properties are missing

alphagov · Dec 13, 2023 · c5e8c16 · c5e8c16
1 parent 53c78f2
commit c5e8c16
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git 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
@@ -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})`)