V9-0.0 beta.5 - fix circular reference (#375)

* update functions

* update mixin

* update changelog and bump package version

* remove circular references from variables, funcs and mixins

* update version and changelog

* remove debug code

* tidy code

CHANGELOG.md

@@ -9,6 +9,15 @@ Future Todo List
 - Deprecate modal and orderCard component styles in next major version as unused.
 
 
+v9.0.0-beta.5
+------------------------------
+*June 21, 2022*
+
+### Changed
+- moved `$fozzie-breakpoints` out of variables file and into the breakpoints helper file to remove circular reference
+- moved `$line-height-base` out of variables file and into the units function file to remove circular reference
+
+
 v9.0.0-beta.4
 ------------------------------
 *June 20, 2022*

package.json

@@ -2,7 +2,7 @@
   "name": "@justeat/fozzie",
   "title": "Fozzie – Just Eat UI Web Framework",
   "description": "UI Web Framework for the Just Eat Global Platform",
-  "version": "9.0.0-beta.4",
+  "version": "9.0.0-beta.5",
   "main": "dist/js/index.js",
   "files": [
     "dist/js",

src/scss/objects/_tables.scss

@@ -1,5 +1,6 @@
 @use '~@justeat/pie-design-tokens/dist/jet' as dt;
 @use '../settings/variables' as v;
+@use '../tools/functions/units';
 
 @mixin tables() {
   /**
@@ -53,7 +54,7 @@
           th,
           td {
               padding: $table-cell-padding;
-              line-height: v.$line-height-base;
+              line-height: units.$line-height-base;
               vertical-align: top;
               border-right: 1px solid $table-verticalBorder--color;
           }

src/scss/settings/_include-media.scss

@@ -1,5 +1,7 @@
 @use 'variables' as v;
+@use '../tools/helpers/breakpoints';
+
 @forward '../../../../../include-media/dist/_include-media' with (
-  $breakpoints: v.$fozzie-breakpoints,
+  $breakpoints: breakpoints.$fozzie-breakpoints,
   $unit-intervals: v.$fozzie-unit-intervals
 ); // Cleaner media query declarations – http://include-media.com

src/scss/settings/_variables.scss

@@ -1,5 +1,4 @@
 @use '~@justeat/pie-design-tokens/dist/jet' as dt;
-@use '../tools/functions/px-to-em';
 
 /* stylelint-disable indentation */
 // =================================
@@ -57,7 +56,6 @@ $type: (
 ) !default;
 
 $font-weight-headings       : dt.$font-weight-extrabold;
-$line-height-base           : line-height();
 
 // Font stacks
 $font-family-base           : dt.$font-family-primary, dt.$font-family-secondary, sans-serif;
@@ -74,15 +72,6 @@ $fozzie-unit-intervals: (
   '': 0
 );
 
-$fozzie-breakpoints: px-to-em.map-to-em((
-    tiny       : 375px,
-    narrow     : 414px,    // narrow devices
-    narrowMid  : 600px,    // narrow-mid tweakpoint
-    mid        : 768px,    // mid bp
-    wide       : 1025px,   // wide bp
-    huge       : 1280px    // huge bp
-), 16); // set to 16 as this is default browser size
-
 // Layout setup
 // ==========================================================================
 

src/scss/tools/functions/_units.scss

@@ -14,11 +14,13 @@
 //
 @use 'sass:math';
 
+$line-height-base : line-height(); // Lifted out of the variables file to fix circular reference issues
+
 @function line-height($font-size: 'body-s', $line-height: '20', $scale: 'default') {
     @if type-of($font-size) == 'number' {
         @return decimal-round(math.div($line-height, $font-size), 2);
-    } @else if map-has-key($type, $font-size) { // else try and find the value in our type map
-        $key-map: map-get($type, $font-size);
+    } @else if map-has-key(v.$type, $font-size) { // else try and find the value in our type map
+        $key-map: map-get(v.$type, $font-size);
         $font-list: map-get($key-map, $scale);
 
         @if type-of($font-list) == 'list' {

src/scss/tools/helpers/_breakpoints.scss

@@ -1,9 +1,20 @@
 @use '../../settings/variables' as v;
 @use '../functions/units';
+@use '../functions/px-to-em';
+
+// Lifted out of the variables file to fix circular reference issues
+$fozzie-breakpoints: px-to-em.map-to-em((
+    tiny       : 375px,
+    narrow     : 414px,    // narrow devices
+    narrowMid  : 600px,    // narrow-mid tweakpoint
+    mid        : 768px,    // mid bp
+    wide       : 1025px,   // wide bp
+    huge       : 1280px    // huge bp
+), 16); // set to 16 as this is default browser size
 
 @function populate-breakpoints() {
     $breakpointString: '';
-    $breakpointsPx: units.map-to-px(v.$fozzie-breakpoints, 16);
+    $breakpointsPx: units.map-to-px($fozzie-breakpoints, 16);
 
     @each $name, $value in $breakpointsPx {
         $breakpointString: $breakpointString + '#{$name}:#{$value},';