Abstract away sass-mq

The fact that we’re using sass-mq is an implementation detail, so we shouldn’t expose it via our public API. This means wrapping their settings with our own settings, and trying to minimise its footprint throughout the app.

app/assets/scss/app-ie8.scss

@@ -1,6 +1,2 @@
-// If you want to display the currently active breakpoint in the top
-// right corner of your site during development, add the breakpoints
-// to this list, ordered by width, e.g. (mobile, tablet, desktop).
-$mq-show-breakpoints: (desktop);
 @import "../../../src/all-ie8";
 @import "partials/app";

app/assets/scss/app.scss

@@ -1,6 +1,4 @@
-// If you want to display the currently active breakpoint in the top
-// right corner of your site during development, add the breakpoints
-// to this list, ordered by width, e.g. (mobile, tablet, desktop).
-$mq-show-breakpoints: (mobile, tablet, desktop);
+$govuk-show-breakpoints: true;
+
 @import "../../../src/all";
 @import "partials/app";

src/helpers/_media-queries.scss

@@ -1,4 +1,23 @@
-// We use sass-mq module for media queries
+// Import sass-mq as a helper for media queries
+
+// Pass our breakpoints and static breakpoint definitions through to sass-mq.
+$mq-breakpoints: if(variable-exists(govuk-breakpoints), $govuk-breakpoints, ());
+$mq-static-breakpoint: if(variable-exists(govuk-ie8-breakpoint), $govuk-ie8-breakpoint, desktop);
+
+$mq-show-breakpoints: ();
+
+@if (variable-exists(govuk-show-breakpoints) and $govuk-show-breakpoints) {
+  $mq-show-breakpoints: map-keys($govuk-breakpoints);
+}
+
+// When building a stylesheet for IE8, set $mq-responsive to false in order to
+// 'rasterize' any media queries.
+
+@if (variable-exists(govuk-is-ie8) and $govuk-is-ie8) {
+  $mq-responsive: false;
+} @else {
+  $mq-responsive: true;
+}
 
 // This is a horrible, horrible hack to prevent the 'dev mode' CSS to display
 // the current breakpoint from being included multiple times.

src/helpers/grid.test.js

@@ -14,11 +14,15 @@ const sassConfig = {
 }
 describe('grid system', () => {
   const sassImports = `
-    @import "tools/exports";
+    @import "settings/ie8";
+    @import "settings/media-queries";
     @import "settings/spacing";
     @import "settings/measurements";
+
     @import "helpers/grid";
     @import "helpers/media-queries";
+
+    @import "tools/exports";
   `
   describe('grid-width function', () => {
     it('outputs the specified key value from the map of widths', async () => {
@@ -115,7 +119,7 @@ describe('grid system', () => {
           box-sizing: border-box;
           width: 100%;
           padding: 0 15px; }
-          @media (min-width: 46.25em) {
+          @media (min-width: 40.0625em) {
             .govuk-grid-column-full {
               width: 100%;
               float: left; } }`)
@@ -137,7 +141,7 @@ describe('grid system', () => {
           box-sizing: border-box;
           width: 100%;
           padding: 0 15px; }
-          @media (min-width: 46.25em) {
+          @media (min-width: 40.0625em) {
             .govuk-grid-column-two-thirds {
               width: 66.6666%;
               float: left; } }
@@ -148,20 +152,20 @@ describe('grid system', () => {
       const sass = `
         ${sassImports}
 
-        @include govuk-grid-column(three-quarters, $class:'large-columnumn');
+        @include govuk-grid-column(three-quarters, $class:'large-column');
       `
       const results = await sassRender({ data: sass, ...sassConfig })
 
       expect(results.css
         .toString()
         .trim())
         .toBe(outdent`
-        .large-columnumn-three-quarters {
+        .large-column-three-quarters {
           box-sizing: border-box;
           width: 100%;
           padding: 0 15px; }
-          @media (min-width: 46.25em) {
-            .large-columnumn-three-quarters {
+          @media (min-width: 40.0625em) {
+            .large-column-three-quarters {
               width: 75%;
               float: left; } }
         `)
@@ -182,7 +186,7 @@ describe('grid system', () => {
         .govuk-grid-column-one-quarter {
           box-sizing: border-box;
           padding: 0 15px; }
-          @media (min-width: 61.25em) {
+          @media (min-width: 48.0625em) {
             .govuk-grid-column-one-quarter {
               width: 25%;
               float: left; } }
@@ -227,7 +231,7 @@ describe('grid system', () => {
           box-sizing: border-box;
           width: 100%;
           padding: 0 15px; }
-          @media (min-width: 46.25em) {
+          @media (min-width: 40.0625em) {
             .govuk-grid-column-one-half {
               width: 50%;
               float: right; } }

src/helpers/spacing.test.js

@@ -14,7 +14,10 @@ const sassConfig = {
 }
 
 const sassBootstrap = `
-  $mq-breakpoints: (
+  @import "settings/media-queries";
+  @import "settings/ie8";
+
+  $govuk-breakpoints: (
     my_breakpoint: 30em
   );
 

src/helpers/typography.test.js

@@ -14,7 +14,10 @@ const sassConfig = {
 }
 
 const sassBootstrap = `
-  $mq-breakpoints: (
+  @import "settings/media-queries";
+  @import "settings/ie8";
+
+  $govuk-breakpoints: (
     my_breakpoint: 30em
   );
 

src/settings/_ie8.scss

@@ -8,3 +8,11 @@
 /// @access public
 
 $govuk-is-ie8: false !default;
+
+/// The name of the breakpoint to use as the target when rasterizing media
+/// queries
+///
+/// @type String
+/// @access public
+
+$govuk-ie8-breakpoint: desktop !default;

src/settings/_media-queries.scss

@@ -1,60 +1,23 @@
-// Media query helpers using sass-mq
-// https://github.com/sass-mq/sass-mq
+////
+/// @group settings/media-queries
+////
 
-// mq() takes up to three optional parameters:
-// $from: inclusive min-width boundary
-// $until: exclusive max-width boundary
-// $and: additional custom directives
-// $media-type: $mq-media-type // defaults to 'all'
+/// Breakpoint definitions
+///
+/// @type Map
+/// @access public
 
-// Write css mobile-first, overriding mobile styles for tablet and desktop
-//
-// .govuk-component {
-//    // Apply styling to mobile and upwards
-//    @include mq($from: mobile) {
-//        color: red;
-//    }
-//    // Apply styling up to devices smaller than tablets (exclude tablets)
-//    @include mq($until: tablet) {
-//        color: blue;
-//    }
-//    // Same thing, in landscape orientation
-//    @include mq($until: tablet, $and: '(orientation: landscape)') {
-//        color: hotpink;
-//    }
-//    // Apply styling to tablets up to desktop (exclude desktop)
-//    @include mq(tablet, desktop) {
-//        color: green;
-//    }
-//    // Print only styling
-//    @include mq($media-type: print) {
-//        display: none;
-//    }
-// }
-
-
-// To enable support for browsers that do not support @media queries,
-// (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false
-// Create a separate stylesheet served exclusively to these browsers,
-// meaning @media queries will be rasterized, relying on the cascade itself
-@if ($govuk-is-ie8) {
-  $mq-responsive: false;
-} @else {
-  $mq-responsive: true;
-}
-
-// Name your breakpoints in a way that creates a ubiquitous language
-// across team members. It will improve communication between
-// stakeholders, designers, developers, and testers.
-$mq-breakpoints: (
+$govuk-breakpoints: (
   mobile:  320px,
-  // Support max-width value from FET ?
-  // mobile: 640px,
   tablet:  641px,
   desktop: 769px
-);
+) !default;
+
+/// Show active breakpoint in top-right corner.
+///
+/// Only use this during local development.
+///
+/// @type Boolean
+/// @access public
 
-// Define the breakpoint from the $mq-breakpoints list that should
-// be used as the target width when outputting a static stylesheet
-// (i.e. when $mq-responsive is set to 'false').
-$mq-static-breakpoint: desktop;
+$govuk-show-breakpoints: false !default;