Merge pull request #4713 from alphagov/deprecate-14-strings

Ensure `govuk-font-size()` handles string keys

CHANGELOG.md

@@ -123,7 +123,7 @@ We have deprecated point 14 (14px large screens, 12px small screens) on the GOV.
 
 We will be removing these classes and point 14 on the type scale in GOV.UK Frontend release v6.0.0. From the next major release, you will no longer be able to call the Sass mixins `govuk-font` or `govuk-font-size` with `$size` set to '14'.
 
-This change was introduced in [#4649: Deprecate 14 on the type scale](https://github.com/alphagov/govuk-frontend/pull/4649)
+This change was introduced in [#4649: Deprecate 14 on the type scale](https://github.com/alphagov/govuk-frontend/pull/4649) and [#4713: Ensure `govuk-font-size()` handles string keys](https://github.com/alphagov/govuk-frontend/pull/4713)
 
 ### Fixes
 

packages/govuk-frontend/src/govuk/helpers/_typography.scss

@@ -156,17 +156,41 @@
 /// @access public
 
 @mixin govuk-font-size($size, $line-height: false, $important: false) {
-  @if not map-has-key($govuk-typography-scale, $size) {
-    @error "Unknown font size `#{$size}` - expected a point from the type scale.";
+  // Flag font sizes that start with underscores so we can suppress warnings on
+  // deprecated sizes used internally, for example `govuk-font($size: "_14")`
+  $size-internal-use-only: str-slice(#{$size}, 1, 1) == "_";
+
+  // Remove underscore from font sizes flagged for internal use
+  @if $size-internal-use-only {
+    $size: str-slice(#{$size}, 2);
   }
 
+  // Check for a font map exactly matching the given size
   $font-map: map-get($govuk-typography-scale, $size);
 
+  // No match? Try with string type (e.g. $size: "16" not 16)
+  @if not $font-map {
+    @each $font-size in map-keys($govuk-typography-scale) {
+      @if not $font-map and #{$font-size} == #{$size} {
+        $font-map: map-get($govuk-typography-scale, $font-size);
+      }
+    }
+  }
+
+  // Still no match? Throw error
+  @if not $font-map {
+    @error "Unknown font size `#{$size}` - expected a point from the type scale.";
+  }
+
   // Check for a deprecation within the type scale
   $deprecation: map-get($font-map, "deprecation");
 
   @if $deprecation {
-    @include _warning(map-get($deprecation, "key"), map-get($deprecation, "message"));
+    // Warn on deprecated font sizes unless flagged for internal use
+    @if not $size-internal-use-only {
+      @include _warning(map-get($deprecation, "key"), map-get($deprecation, "message"));
+    }
+
     // remove the deprecation map keys so they do not break the breakpoint loop
     $font-map: map-remove($font-map, "deprecation");
   }

packages/govuk-frontend/src/govuk/helpers/typography.unit.test.js

@@ -277,6 +277,73 @@ describe('@mixin govuk-font-size', () => {
     })
   })
 
+  it('outputs CSS when passing size as a string', async () => {
+    const sass = `
+      ${sassBootstrap}
+
+      .foo {
+        @include govuk-font-size($size: "14")
+      }
+    `
+
+    await expect(compileSassString(sass)).resolves.toMatchObject({
+      css: outdent`
+        .foo {
+          font-size: 0.75rem;
+          line-height: 1.25;
+        }
+        @media (min-width: 30em) {
+          .foo {
+            font-size: 0.875rem;
+            line-height: 1.4285714286;
+          }
+        }
+      `
+    })
+  })
+
+  it('outputs CSS using points as strings', async () => {
+    const sass = `
+      $govuk-breakpoints: (
+        desktop: 30em
+      );
+
+      $govuk-typography-scale: (
+        "small": (
+          null: (
+            font-size: 12px,
+            line-height: 15px
+          ),
+          print: (
+            font-size: 14pt,
+            line-height: 1.5
+          )
+        )
+      );
+
+      @import "base";
+
+      .foo {
+        @include govuk-font-size($size: "small")
+      }
+    `
+
+    await expect(compileSassString(sass)).resolves.toMatchObject({
+      css: outdent`
+        .foo {
+          font-size: 0.75rem;
+          line-height: 1.25;
+        }
+        @media print {
+          .foo {
+            font-size: 14pt;
+            line-height: 1.5;
+          }
+        }
+      `
+    })
+  })
+
   it('throws an exception when passed a size that is not in the scale', async () => {
     const sass = `
       ${sassBootstrap}

packages/govuk-frontend/src/govuk/overrides/_typography.scss

@@ -6,19 +6,15 @@
   //
   // govuk-!-font-size-14 is deprecated
   @each $size, $font-map in $govuk-typography-scale {
-    // Suppress class if the map key is a string with an underscore eg: _14 to
-    // avoid classes like govuk-!-font-size-_14 getting generated
-    @if type-of($size) == "number" or str-slice(#{$size}, 1, 1) != "_" {
-      .govuk-\!-font-size-#{$size} {
-        $font-map: map-get($govuk-typography-scale, $size);
+    .govuk-\!-font-size-#{$size} {
+      $font-map: map-get($govuk-typography-scale, $size);
 
-        // Add underscore to deprecated typography scale keys
-        @if map-has-key($font-map, "deprecation") {
-          $size: _#{$size};
-        }
-
-        @include govuk-font-size($size, $important: true);
+      // Add underscore to deprecated typography scale keys
+      @if map-has-key($font-map, "deprecation") {
+        $size: _#{$size};
       }
+
+      @include govuk-font-size($size, $important: true);
     }
   }
 

packages/govuk-frontend/src/govuk/settings/_typography-responsive.scss

@@ -157,19 +157,5 @@ $govuk-typography-scale: (
       message: "14 on the type scale is deprecated and will be removed as " +
         "a possible option in the next major version."
     )
-  ),
-  _14: (
-    null: (
-      font-size: 12px,
-      line-height: 15px
-    ),
-    tablet: (
-      font-size: 14px,
-      line-height: 20px
-    ),
-    print: (
-      font-size: 12pt,
-      line-height: 1.2
-    )
   )
 ) !default;