Simplify prefix for breakpoint custom properties

[36degrees]

Since #4562 we’ve exposed our breakpoints (mobile, tablet, desktop) as CSS custom properties so that we can use them in matchMedia functions in our JavaScript without having to duplicate the values.

When we introduced them we prefixed them with --govuk-frontend, I think to align with the existing --govuk-frontend-version property.

But the --govuk-frontend-version property is about GOV.UK Frontend, whereas I think we can simplify the prefix for the rest of our custom properties to just --govuk, matching what we do in Sass for our functions, mixins and variables.

Keep the existing custom property names as aliases just in case anyone else is using them, but mark them as deprecated to be removed in the next major release.

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	128.09 KiB
dist/govuk-frontend-development.min.js	48.07 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	102.17 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	95.95 KiB
packages/govuk-frontend/dist/govuk/all.mjs	1.28 KiB
packages/govuk-frontend/dist/govuk/component.mjs	1.67 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	128.08 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	48.05 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	6.89 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	90.17 KiB	45.66 KiB
accordion.mjs	26.58 KiB	13.41 KiB
button.mjs	9.09 KiB	3.79 KiB
character-count.mjs	25.48 KiB	11 KiB
checkboxes.mjs	7.76 KiB	3.42 KiB
error-summary.mjs	10.99 KiB	4.55 KiB
exit-this-page.mjs	20.2 KiB	10.34 KiB
file-upload.mjs	20.83 KiB	11.11 KiB
header.mjs	6.47 KiB	3.27 KiB
notification-banner.mjs	9.35 KiB	3.71 KiB
password-input.mjs	18.16 KiB	8.34 KiB
radios.mjs	6.76 KiB	2.98 KiB
service-navigation.mjs	6.38 KiB	3.25 KiB
skip-link.mjs	6.34 KiB	2.76 KiB
tabs.mjs	11.98 KiB	6.66 KiB

View stats and visualisations on the review app

---

Action run for 61b1119

[github-actions]

JavaScript changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
index ec1f4bdde..d80ba2095 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -5,7 +5,7 @@ function getFragmentFromUrl(t) {
 }
 
 function getBreakpoint(t) {
-    const e = `--govuk-frontend-breakpoint-${t}`;
+    const e = `--govuk-breakpoint-${t}`;
     return {
         property: e,
         value: window.getComputedStyle(document.documentElement).getPropertyValue(e) || void 0

---

Action run for 61b1119

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 0ef0ced61..bfc8a7fd6 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -2,9 +2,12 @@
 
 :root {
     --govuk-frontend-version: "development";
-    --govuk-frontend-breakpoint-mobile: 20rem;
-    --govuk-frontend-breakpoint-tablet: 40.0625rem;
-    --govuk-frontend-breakpoint-desktop: 48.0625rem
+    --govuk-breakpoint-mobile: 20rem;
+    --govuk-frontend-breakpoint-mobile: var(--govuk-breakpoint-mobile);
+    --govuk-breakpoint-tablet: 40.0625rem;
+    --govuk-frontend-breakpoint-tablet: var(--govuk-breakpoint-tablet);
+    --govuk-breakpoint-desktop: 48.0625rem;
+    --govuk-frontend-breakpoint-desktop: var(--govuk-breakpoint-desktop)
 }
 
 .govuk-link {

---

Action run for 61b1119

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.js b/packages/govuk-frontend/dist/govuk/all.bundle.js
index 58ee64b0d..faef4da0b 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.js
@@ -13,7 +13,7 @@
     return url.split('#').pop();
   }
   function getBreakpoint(name) {
-    const property = `--govuk-frontend-breakpoint-${name}`;
+    const property = `--govuk-breakpoint-${name}`;
     const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
     return {
       property,
diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.mjs b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
index d14de1c55..7ecad9867 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
@@ -7,7 +7,7 @@ function getFragmentFromUrl(url) {
   return url.split('#').pop();
 }
 function getBreakpoint(name) {
-  const property = `--govuk-frontend-breakpoint-${name}`;
+  const property = `--govuk-breakpoint-${name}`;
   const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
   return {
     property,
diff --git a/packages/govuk-frontend/dist/govuk/common/index.mjs b/packages/govuk-frontend/dist/govuk/common/index.mjs
index 32e6973f9..fb2303ca6 100644
--- a/packages/govuk-frontend/dist/govuk/common/index.mjs
+++ b/packages/govuk-frontend/dist/govuk/common/index.mjs
@@ -5,7 +5,7 @@ function getFragmentFromUrl(url) {
   return url.split('#').pop();
 }
 function getBreakpoint(name) {
-  const property = `--govuk-frontend-breakpoint-${name}`;
+  const property = `--govuk-breakpoint-${name}`;
   const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
   return {
     property,
diff --git a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.js b/packages/govuk-frontend/dist/govuk/components/header/header.bundle.js
index 219d854be..b392fa8bf 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/header/header.bundle.js
@@ -5,7 +5,7 @@
 })(this, (function (exports) { 'use strict';
 
   function getBreakpoint(name) {
-    const property = `--govuk-frontend-breakpoint-${name}`;
+    const property = `--govuk-breakpoint-${name}`;
     const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
     return {
       property,
diff --git a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/header/header.bundle.mjs
index 6c3e57646..595a95ae3 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/header/header.bundle.mjs
@@ -1,5 +1,5 @@
 function getBreakpoint(name) {
-  const property = `--govuk-frontend-breakpoint-${name}`;
+  const property = `--govuk-breakpoint-${name}`;
   const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
   return {
     property,
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js
index 9816d2321..0a308d983 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js
@@ -5,7 +5,7 @@
 })(this, (function (exports) { 'use strict';
 
   function getBreakpoint(name) {
-    const property = `--govuk-frontend-breakpoint-${name}`;
+    const property = `--govuk-breakpoint-${name}`;
     const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
     return {
       property,
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs
index c27f34a30..3b02a6ee2 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs
@@ -1,5 +1,5 @@
 function getBreakpoint(name) {
-  const property = `--govuk-frontend-breakpoint-${name}`;
+  const property = `--govuk-breakpoint-${name}`;
   const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
   return {
     property,
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.js b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.js
index de40e5681..8f055d6db 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.js
@@ -11,7 +11,7 @@
     return url.split('#').pop();
   }
   function getBreakpoint(name) {
-    const property = `--govuk-frontend-breakpoint-${name}`;
+    const property = `--govuk-breakpoint-${name}`;
     const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
     return {
       property,
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.mjs
index a989e9ed7..7b9f1a09c 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.mjs
@@ -5,7 +5,7 @@ function getFragmentFromUrl(url) {
   return url.split('#').pop();
 }
 function getBreakpoint(name) {
-  const property = `--govuk-frontend-breakpoint-${name}`;
+  const property = `--govuk-breakpoint-${name}`;
   const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
   return {
     property,
diff --git a/packages/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss b/packages/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss
index 88f50e349..6b9136d55 100644
--- a/packages/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss
+++ b/packages/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss
@@ -5,7 +5,10 @@
 
   // CSS custom property for each breakpoint
   @each $name, $value in $govuk-breakpoints {
-    --govuk-frontend-breakpoint-#{$name}: #{govuk-px-to-rem($value)};
+    --govuk-breakpoint-#{$name}: #{govuk-px-to-rem($value)};
+
+    // Deprecated, use `--govuk-breakpoint-[name]` instead
+    --govuk-frontend-breakpoint-#{$name}: var(--govuk-breakpoint-#{$name});
   }
 }
 

---

Action run for 61b1119

[36degrees]

If we're happy with this change, I'll need to create an issue to clean up the deprecated custom properties in v6.

[domoscargin]

I think this is a sensible change.