Merge pull request #726 from alphagov/new-font-loading-strategy

Use new font loading strategy

CHANGELOG.md

@@ -4,6 +4,39 @@ Note: We're not following semantic versioning yet, we are going to talk about th
 
 ## Unreleased
 
+💥 Breaking changes:
+
+- The `govuk-file-url` helper has been renamed to to `govuk-image-url`. If you
+  are using this function in your own styles you will need to update calls to
+  it. ([PR #726](https://github.com/alphagov/govuk-frontend/pull/726))
+
+- The `$govuk-global-images` variable has been renamed to to
+  `$govuk-images-path`. If you are overriding this variable or using it in your
+  own styles you will need to update your code to use the new variable name.
+  ([PR #726](https://github.com/alphagov/govuk-frontend/pull/726))
+
+
+🔧 Fixes:
+
+- Fixes a bug whereby print styles were being 'rasterized' into the screen
+  styles when generating the IE8 stylesheet (this is a bug in sass-mq, and has
+  also been raised upstream – https://github.com/sass-mq/sass-mq/pull/111).
+  ([PR #726](https://github.com/alphagov/govuk-frontend/pull/726))
+
+
+🆕 New features:
+
+- Change font delivery method from Base64 encoded strings to serving WOFF2, WOFF
+  and EOT files as separate HTTP requests. You will need to ensure that you are
+  serving the fonts from the assets folder as part of your application.
+  ([PR #726](https://github.com/alphagov/govuk-frontend/pull/726))
+
+- The font-face is now using `font-display: fallback`. This means that the
+  fallback font (Arial) will be used if NTA doesn't download within 100ms. The
+  browser will then swap to NTA as long as it loads within the short swap period.
+  ([PR #726](https://github.com/alphagov/govuk-frontend/pull/726))
+
+
 🏠 Internal:
 
 - Improve release steps, based on doing a release

src/components/button/_button.scss

@@ -145,12 +145,12 @@
     padding-bottom: $govuk-spacing-scale-2 - $govuk-border-width-form-element;
     padding-left: $govuk-spacing-scale-3;
 
-    background-image: govuk-file-url("icon-pointer.png");
+    background-image: govuk-image-url("icon-pointer.png");
     background-repeat: no-repeat;
     background-position: 100% 50%;
 
     @include govuk-device-pixel-ratio {
-      background-image: govuk-file-url("icon-pointer-2x.png");
+      background-image: govuk-image-url("icon-pointer-2x.png");
       background-size: 30px 19px;
     }
   }

src/components/footer/_footer.scss

@@ -13,7 +13,7 @@
   $govuk-footer-link: $govuk-footer-text;
   $govuk-footer-link-hover: #171819;
 
-  // Based on the `govuk-file-url("govuk-crest-2x.png");` image dimensions.
+  // Based on the govuk-crest-2x.png image dimensions.
   $govuk-footer-crest-image-width-2x: 250px;
   $govuk-footer-crest-image-height-2x: 204px;
   // Half the 2x image so that it fits the regular 1x size.
@@ -105,9 +105,9 @@
     display: inline-block;
     min-width: $govuk-footer-crest-image-width;
     padding-top: ($govuk-footer-crest-image-height + $govuk-spacing-scale-2);
-    background-image: govuk-file-url("govuk-crest.png");
+    background-image: govuk-image-url("govuk-crest.png");
     @include govuk-device-pixel-ratio {
-      background-image: govuk-file-url("govuk-crest-2x.png");
+      background-image: govuk-image-url("govuk-crest-2x.png");
     }
     background-repeat: no-repeat;
     background-position: 50% 0%;

src/settings/_paths.scss

@@ -1,2 +1,12 @@
-// Set the path to your images folder
-$govuk-global-images: "/assets/images/" !default;
+/// Path to the assets directory, with trailing slash.
+///
+/// This is the directory where the images and fonts subdirectories live. You
+/// will need to make this directory available via your application – see the
+/// README for details.
+$govuk-assets-path: "/assets/" !default;
+
+// Path to the images folder, with trailing slash.
+$govuk-images-path: "#{$govuk-assets-path}images/" !default;
+
+// Path to the fonts folder, with trailing slash.
+$govuk-fonts-path: "#{$govuk-assets-path}fonts/" !default;

src/tools/_all.scss

@@ -1,6 +1,7 @@
 @import "compatibility";
 @import "exports";
-@import "file-url";
+@import "font-url";
 @import "ie8";
 @import "iff";
+@import "image-url";
 @import "px-to-em";

src/tools/_font-url.scss

@@ -0,0 +1,7 @@
+/// Font URL
+///
+/// Returns a URL for the given font filename
+
+@function govuk-font-url($filename) {
+  @return url($govuk-fonts-path + $filename);
+}

src/tools/_image-url.scss

@@ -0,0 +1,7 @@
+/// Image URL
+///
+/// Returns a URL for the given image filename
+
+@function govuk-image-url($filename) {
+  @return url($govuk-images-path + $filename);
+}

src/vendor/_sass-mq.scss

@@ -210,6 +210,7 @@ $mq-media-type: all !default;
             and (
                 $until == false or $max-width >= $target-width
             )
+            and $media-type != 'print'
         ) {
             @content;
         }

src/vendor/sass-mq.test.js

@@ -254,7 +254,7 @@ describe('sass-mq', () => {
       expect(results.css.toString().trim()).toBe('@media aural and (max-width: 40em){.foo{color:red}}')
     })
 
-    it('only outputs static breapoint styles', async() => {
+    it('only outputs static breakpoint styles', async() => {
       const sass = `
         $mq-breakpoints: (
           mobile:  320px,
@@ -281,5 +281,23 @@ describe('sass-mq', () => {
 
       expect(results.css.toString().trim()).toBe('.foo{color:forestgreen}')
     })
+
+    it('does not rasterize print queries', async() => {
+      const sass = `
+        $mq-responsive: false;
+
+        @import "vendor/sass-mq";
+
+        .foo {
+          color: blue;
+          @include mq($media-type: 'print') {
+            color: red;
+          }
+        }`
+
+      const results = await sassRender({ data: sass, ...sassConfig })
+
+      expect(results.css.toString().trim()).toBe('.foo{color:blue}')
+    })
   })
 })