fix: styleguide build

Do not use `@use math:div` inside Hugo

package.json

@@ -19,6 +19,7 @@
     "prettier:staged": "pretty-quick --staged --pattern \"**/*.scss\"",
     "server": "http-server -p 8090",
     "start": "run-p build:sass:watch copy server",
+    "styleguide": "yarn build:styleguide:sass && cd styleguide && hugo server -D -F",
     "start:webpack": "run-p build copy server",
     "test": "yarn run test:bundlesize && jest",
     "test:bundlesize": "yarn build:sass && bundlesize"

styleguide/assets/minimalist/main.css

@@ -349,6 +349,9 @@ a:hover, a:focus {
 a code {
   text-decoration-skip-ink: none;
 }
+a.external {
+  display: inline-block;
+}
 a.external::after {
   background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiIHJvbGU9ImltZyI+PGcgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNNjkuMzcgNTQuMTF2MjUuODNhMi42MSAyLjYxIDAgMDEtMi42IDIuNkgyMGEyLjYxIDIuNjEgMCAwMS0yLjYtMi42di00Ni44YTIuNjEgMi42MSAwIDAxMi42LTIuNmgzMS40OVYyNEgxNC4xMmEzLjI2IDMuMjYgMCAwMC0zLjI1IDMuMjV2NTguNUEzLjI2IDMuMjYgMCAwMDE0LjEyIDg5aDU4LjVhMy4yNiAzLjI2IDAgMDAzLjI1LTMuMjVWNTQuMTF6Ii8+PHBhdGggZD0iTTUwLjc1IDU0Ljg1bDMwLjYyLTMwLjYyVjUxYTMuOTEgMy45MSAwIDAwMy45IDMuODlBMy44NiAzLjg2IDAgMDA4OS4xMyA1MVYxNC44OEEzLjg2IDMuODYgMCAwMDg1LjI3IDExSDQ5LjEzYTMuODcgMy44NyAwIDEwMCA3LjczaDI2Ljc2TDQ1LjI2IDQ5LjM3YTMuODggMy44OCAwIDEwNS40OSA1LjQ4eiIvPjwvZz48L3N2Zz4K) 0 0 no-repeat;
   background-size: 16px;
@@ -547,9 +550,14 @@ code {
   box-decoration-break: clone;
   font-family: consolas, "Liberation Mono", courier, monospace;
   padding: 0 3px;
+  white-space: nowrap;
   word-wrap: break-word;
 }
 
+pre code {
+  white-space: pre;
+}
+
 .notranslate code {
   background-color: transparent;
 }

styleguide/assets/molecules/_toc.scss

@@ -1,16 +1,14 @@
-@use "sass:math";
-
 .toc {
-  bottom: math.div($base-spacing, 2);
+  bottom: $base-spacing / 2;
   max-height: 95vh;
   overflow: scroll;
   position: sticky;
-  top: math.div($base-spacing, 2);
+  top: $base-spacing / 2;
 
   nav > ul {
     list-style: none;
     margin: 0;
     padding: 0;
-    padding-left: math.div($base-spacing, 2);
+    padding-left: $base-spacing / 2;
   }
 }

styleguide/assets/organisms/_footer.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 .page-footer-logo {
   margin-bottom: $base-spacing;
 
@@ -47,7 +45,7 @@
     }
 
     ul {
-      padding-inline-start: math.div($base-spacing, 4);
+      padding-inline-start: $base-spacing / 4;
     }
 
     svg {

styleguide/assets/styleguide.scss

@@ -1,6 +1,6 @@
 @import "../../sass/vars/color-palette";
 @import "../../sass/vars/mdn-web-docs-palette";
-@import "../../sass/vars/layout";
+@import "./vars/layout";
 @import "../../sass/vars/typography";
 
 @import "./utils/layout";

styleguide/assets/vars/_layout.scss

@@ -0,0 +1,42 @@
+$browser-default-font-size: 16px;
+$base-unit: 6px;
+
+$base-spacing: $base-unit * 4;
+$medium-spacing: $base-spacing * 2;
+$large-spacing: $medium-spacing * 2;
+
+$base-section-spacing: ($base-spacing * 2) $base-spacing;
+$base-section-spacing-mobile: ($base-spacing / 2) $base-spacing;
+$content-block-margin: $base-spacing;
+
+$max-width-default: 1400px;
+$max-width-small-desktop: (1023px / $browser-default-font-size) * 1em;
+
+$small-mobile-ends: (479px / $browser-default-font-size) * 1em;
+$mobile-starts: $small-mobile-ends + 0.001em;
+$mobile-ends: (767px / $browser-default-font-size) * 1em;
+
+$tablet-starts: $mobile-ends + 0.001em;
+$tablet-ends: (1023px / $browser-default-font-size) * 1em;
+
+$small-desktop-starts: $tablet-ends + 0.001em;
+$small-desktop-ends: (1199px / $browser-default-font-size) * 1em;
+
+/*
+ * media queries
+ * - MDN should be coded "mobile first"
+ * - when coding features, begin by coding the mobile presentation as default
+ */
+$mq-large-desktop-and-up: "all and (min-width: #{$small-desktop-ends})";
+$mq-small-desktop-and-up: "all and (min-width: #{$small-desktop-starts})";
+$mq-tablet-and-up: "all and (min-width: #{$tablet-starts})";
+$mq-mobile-and-up: "all and (min-width: #{$mobile-starts})";
+
+/*
+ * z-index scale
+ */
+$send-to-back: -1;
+$bring-to-front: 9999;
+$bottom-layer: 100;
+$middle-layer: 200;
+$top-layer: 300;

styleguide/layouts/partials/head.html

@@ -42,12 +42,12 @@
     <meta name="twitter:image:alt" content="" />
     -->
 
-    {{ $sass := resources.Get "minimalist/main.css" }}
-    {{ $options := (dict "enableSourceMap" true "outputStyle" "compressed") }}
-    {{ $styles := $sass | resources.ToCSS $options | minify | fingerprint }}
-    <link rel="stylesheet" href="{{ $styles.RelPermalink }}"
-        integrity="{{ $styles.Data.Integrity }}">
+    {{ $minimalist := resources.Get "minimalist/main.css" }}
+    <link rel="stylesheet" href="{{ $minimalist.RelPermalink }}"
+        integrity="{{ $minimalist.Data.Integrity }}">
 
+    {{ $options := (dict "enableSourceMap" true "outputStyle"
+    "compressed") }}
     {{ $styleguide_sass := resources.Get "styleguide.scss" }}
     {{ $styleguide_styles := $styleguide_sass | resources.ToCSS $options | minify |
     fingerprint }}

styleguide/resources/_gen/assets/css/minimalist/main.css_ee09be97884a98f1c989950cdaabae63.json

@@ -1 +1 @@
-{"Target":"minimalist/main.min.32c9c3c9da3255b5d6ca53a361a78117a9b727ab60cf58b6dab9e895566812c4.css","MediaType":"text/css","Data":{"Integrity":"sha256-MsnDydoyVbXWylOjYaeBF6m3J6tgz1i22rnolVZoEsQ="}}
+{"Target":"minimalist/main.min.e367f3b42cf267643c4207fd6ccaa5dd1aa39ec743ef064fe27b2781dc833dec.css","MediaType":"text/css","Data":{"Integrity":"sha256-42fztCzyZ2Q8Qgf9bMql3RqjnsdD7wZP4nsngdyDPew="}}