Merge pull request 'fix_deprecated_sass' (#6) from fix_deprecated_sass into master

Reviewed-on: #6

package.json

@@ -8,17 +8,16 @@
     "@11ty/eleventy": "^3.0.0",
     "@11ty/eleventy-plugin-rss": "^2.0.2",
     "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3",
-    "@tbranyen/jsdom": "^13.0.0",
+    "jsdom": "^24.0.0",
     "bootstrap": "^5.1.3",
     "concurrently": "^7.0.0",
-    "html-minifier": "^4.0.0",
+    "html-minifier-terser": "^7.2.0",
     "image-size": "^0.8.3",
     "json-to-scss": "^1.3.1",
     "leaflet": "^1.7.1",
     "sass": "^1.26.3",
     "semver": "^6.3.0",
-    "slugify": "^1.4.0",
+    "slugify": "^1.4.0"
-    "stalfos": "github:hankchizljaw/stalfos#c8971d22726326cfc04089b2da4d51eeb1ebb0eb"
   },
   "devDependencies": {
     "@erquhart/rollup-plugin-node-builtins": "^2.1.5",

src/scss/_config.scss

@@ -1,4 +1,5 @@
-@import 'tokens';
+@use 'tokens';
+@use 'sass:map';
 
 /**
  * SIZE SCALE
@@ -6,22 +7,14 @@
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off these tokens.
  */
-$stalfos-size-scale: map-get($tokens, 'size-scale');
+$size-scale: map.get(tokens.$tokens, 'size-scale');
 
 /**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
-$stalfos-colors: map-get($tokens, 'colors');
+$colors: map.get(tokens.$tokens, 'colors');
-
-/**
- * UTIL PREFIX
- * All pre-built, framework utilities will have this prefix. 
- * Example: the wrapper utility is '.sf-wrapper' because the default
- * prefix is 'sf-'.
- */
-$stalfos-util-prefix: 'sf-';
 
 /**
  * METRICS
@@ -32,151 +25,3 @@ $metrics: (
   'wrap-inner-max-width': 47rem,
   'md-breakpoint': 48rem
 );
-
-/**
- * CORE CONFIG
- * This powers everything from utility class generation to breakpoints
- * to enabling/disabling pre-built components/utilities.
- */
-$stalfos-config: (
-  'align': (
-    'items': (
-      'start': 'flex-start',
-      'center': 'center',
-      'end': 'flex-end'
-    ),
-    'output': 'responsive',
-    'property': 'align-items'
-  ),
-  'bg': (
-    'items': $stalfos-colors,
-    'output': 'standard',
-    'property': 'background'
-  ),
-  'color': (
-    'items': $stalfos-colors,
-    'output': 'standard',
-    'property': 'color'
-  ),
-  'box': (
-    'items': (
-      'block': 'block',
-      'flex': 'flex',
-      'inline-flex': 'inline-flex',
-      'hide': 'none'
-    ),
-    'output': 'responsive',
-    'property': 'display'
-  ),
-  'font': (
-    'items': map-get($tokens, 'fonts'),
-    'output': 'standard',
-    'property': 'font-family'
-  ),
-  'gap-top': (
-    'items': $stalfos-size-scale,
-    'output': 'standard',
-    'property': 'margin-top'
-  ),
-  'gap-bottom': (
-    'items': $stalfos-size-scale,
-    'output': 'standard',
-    'property': 'margin-bottom'
-  ),
-  'leading': (
-    'items': (
-      'tight': '1.2',
-      'mid': '1.5',
-      'loose': '1.7'
-    ),
-    'output': 'standard',
-    'property': 'line-height'
-  ),
-  'measure': (
-    'items': (
-      'long': '75ch',
-      'short': '60ch',
-      'compact': '40ch'
-    ),
-    'output': 'standard',
-    'property': 'max-width'
-  ),
-  'pad-top': (
-    'items': $stalfos-size-scale,
-    'output': 'standard',
-    'property': 'padding-top'
-  ),
-  'pad-bottom': (
-    'items': $stalfos-size-scale,
-    'output': 'standard',
-    'property': 'padding-bottom'
-  ),
-  'pad-left': (
-    'items': $stalfos-size-scale,
-    'output': 'standard',
-    'property': 'padding-left'
-  ),
-  'space': (
-    'items': (
-      'between': 'space-between',
-      'around': 'space-around',
-      'before': 'flex-end'
-    ),
-    'output': 'responsive',
-    'property': 'justify-content'
-  ),
-  'stack': (
-    'items': (
-      '300': 0,
-      '400': 10,
-      '500': 20,
-      '600': 30,
-      '700': 40
-    ),
-    'output': 'standard',
-    'property': 'z-index'
-  ),
-  'ta': (
-    'items': (
-      'right': 'right',
-      'left': 'left',
-      'center': 'center'
-    ),
-    'output': 'responsive',
-    'property': 'text-align'
-  ),
-  'text': (
-    'items': $stalfos-size-scale,
-    'output': 'responsive',
-    'property': 'font-size'
-  ),
-  'weight': (
-    'items': (
-      'light': '300',
-      'regular': '400',
-      'mid': '600',
-      'bold': '700'
-    ),
-    'output': 'standard',
-    'property': 'font-weight'
-  ),
-  'width': (
-    'items': (
-      'full': '100%',
-      'half': percentage(.5),
-      'quarter': percentage(.25),
-      'third': percentage(.33)
-    ),
-    'output': 'responsive',
-    'property': 'width'
-  ),
-  'breakpoints': (
-    'md': #{'(min-width: ' + map-get($metrics, 'md-breakpoint') + ')'}
-  ),
-  'utilities': (
-    'reset': 'on',
-    'icon': 'off',
-    'flow': 'on',
-    'wrapper': 'off'
-  )
-);

src/scss/_functions.scss

@@ -0,0 +1,28 @@
+@use 'tokens';
+@use 'sass:map';
+
+/**
+ * CUSTOM FUNCTIONS
+ * Replacement functions for stalfos get-size() and get-color() functions
+ */
+
+/**
+ * Get size from the size scale
+ * @param {string|number} $size - The size key from the scale
+ * @return {string} - The size value
+ */
+@function get-size($size) {
+  @if $size == 'base' {
+    @return map.get(tokens.$tokens, 'size-scale', 'base');
+  }
+  @return map.get(tokens.$tokens, 'size-scale', $size);
+}
+
+/**
+ * Get color from the color palette
+ * @param {string} $color - The color key from the palette
+ * @return {string} - The color value
+ */
+@function get-color($color) {
+  @return map.get(tokens.$tokens, 'colors', $color);
+}

src/scss/_theme.scss

@@ -1,28 +1,32 @@
+@use 'config';
+@use 'functions';
+@use 'sass:list';
+
 :root {
   // Pull the tokens and generate custom props
-  @each $color in $stalfos-colors {
+  @each $color in config.$colors {
-    #{'--color-' + nth($color, 1)}: #{nth($color, 2)};
+    #{'--color-' + list.nth($color, 1)}: #{list.nth($color, 2)};
   }
 
   // Set theme aliases
   --color-mode: 'light';
-  --color-bg: #{get-color('light')};
+  --color-bg: #{functions.get-color('light')};
-  --color-bg-glare: #{get-color('light')};
+  --color-bg-glare: #{functions.get-color('light')};
-  --color-text: #{get-color('dark')};
+  --color-text: #{functions.get-color('dark')};
-  --color-text-glare: #{get-color('dark')};
+  --color-text-glare: #{functions.get-color('dark')};
-  --color-selection-text: #{get-color('light')};
+  --color-selection-text: #{functions.get-color('light')};
-  --color-selection-bg: #{get-color('dark')};
+  --color-selection-bg: #{functions.get-color('dark')};
-  --color-stroke: #{get-color('mid')};
+  --color-stroke: #{functions.get-color('mid')};
-  --color-action-bg: #{get-color('primary')};
+  --color-action-bg: #{functions.get-color('primary')};
-  --color-action-text: #{get-color('dark')};
+  --color-action-text: #{functions.get-color('dark')};
-  --color-theme-primary: #{get-color('primary')};
+  --color-theme-primary: #{functions.get-color('primary')};
-  --color-theme-primary-glare: #{get-color('primary-glare')};
+  --color-theme-primary-glare: #{functions.get-color('primary-glare')};
-  --color-theme-highlight: #{get-color('highlight')};
+  --color-theme-highlight: #{functions.get-color('highlight')};
-  --color-theme-highlight-block: #{get-color('highlight')};
+  --color-theme-highlight-block: #{functions.get-color('highlight')};
-  --color-theme-secondary: #{get-color('secondary')};
+  --color-theme-secondary: #{functions.get-color('secondary')};
-  --color-light-gray: #{get-color('light-gray')};
+  --color-light-gray: #{functions.get-color('light-gray')};
-  --color-light-blue: #{get-color('light-blue')};
+  --color-light-blue: #{functions.get-color('light-blue')};
-  --color-white: #{get-color('light')};
+  --color-white: #{functions.get-color('light')};
 }
 
 body {

src/scss/_typography.scss

@@ -1,3 +1,7 @@
+@use 'tokens';
+@use 'functions';
+@use 'sass:map';
+
 /* varela-round-regular - latin */
 @font-face {
   font-family: 'Varela Round';
@@ -57,8 +61,8 @@
 }
 
 body {
-  $line-height: get-size(600);
+  $line-height: functions.get-size(600);
-  @include apply-utility('font', 'base');
+  font-family: #{map.get(tokens.$tokens, 'fonts', 'base')};
 
   // Strip the unit off the size ratio to generate a line height
   line-height: calc($line-height / 1);
@@ -66,7 +70,7 @@ body {
 
 h1,
 h2 {
-  @include apply-utility('font', 'brand');
+  font-family: #{map.get(tokens.$tokens, 'fonts', 'brand')};
 }
 
 h1 {
@@ -81,7 +85,7 @@ h2 {
 }
 
 h3 {
-  font-size: get-size(500);
+  font-size: functions.get-size(500);
 }
 
 @media (max-width: 575.98px) {

src/scss/components/_button.scss

@@ -1,10 +1,12 @@
+@use '../functions';
+
 .button,
 .btn {
   display: inline-block;
   border: 0;
   background-color: var(--color-action-bg);
   color: var(--color-action-text);
-  padding: get-size(300) get-size('base');
+  padding: functions.get-size(300) functions.get-size('base');
   line-height: 1;
   margin: 0;
   text-decoration: none;

src/scss/components/_form.scss

@@ -1,3 +1,6 @@
+@use '../tokens';
+@use 'sass:map';
+
 .home .form-container {
   svg > path:first-child {
     fill: #f1f0f6;
@@ -40,7 +43,7 @@ label {
 input,
 textarea,
 select {
-  @include apply-utility('font', 'base');
+  font-family: #{map.get(tokens.$tokens, 'fonts', 'base')};
   background-color: var(--color-primary-glare);
   font: inherit;
   border: 0;

src/scss/components/_heading-permalink.scss

@@ -4,7 +4,7 @@
   margin-left: .3em;
   margin-top: .2em;
 
-  @include media-query('md') {
+  @media (min-width: 48rem) {
     font-size: .6em;
     margin-top: .4em;
   }

src/scss/components/_intro.scss

@@ -1,3 +1,5 @@
+@use '../functions';
+
 .intro {
   margin-top: 8rem;
   
@@ -7,8 +9,8 @@
   }
 
   &__summary {
-    --flow-space: #{get-size(500)};
+    --flow-space: #{functions.get-size(500)};
-    font-size: get-size(500);
+    font-size: functions.get-size(500);
 
     a {
       color: currentColor;

src/scss/components/_member.scss

@@ -38,6 +38,12 @@
     .social-links {
       display: flex;
 
+      li {
+        &::marker {
+          display: none;
+        }
+      }
+
       li + li {
         margin-left: 1rem;
       }

src/scss/components/_modal.scss

@@ -1,3 +1,6 @@
+@use '../tokens';
+@use 'sass:map';
+
 .modal-content {
   border: 0;
   border-radius: 1.5rem;
@@ -10,7 +13,7 @@
   }
 
   h3 {
-    @include apply-utility('font', 'brand');
+    font-family: #{map.get(tokens.$tokens, 'fonts', 'brand')};
     font-size: 1.5rem;
   }
 }

src/scss/components/_nav.scss

@@ -1,3 +1,5 @@
+@use '../functions';
+
 .nav {
   &__list {
     overflow-x: auto;
@@ -19,11 +21,11 @@
   }
 
   &__item {
-    padding: get-size(300) 0;
+    padding: functions.get-size(300) 0;
     flex-shrink: 0;
 
     a {
-      @include apply-utility('weight', 'mid');
+      font-weight: 600;
       color: currentColor;
 
       &:not(:hover) {

src/scss/components/_post.scss

@@ -1,3 +1,9 @@
+@use '../config';
+@use '../functions';
+@use '../tokens';
+@use '../utilities/visually-hidden';
+@use 'sass:map';
+
 .post {
   margin-bottom: 8rem;
 
@@ -11,7 +17,7 @@
 
     h2,
     h3 {
-      @include apply-utility('leading', 'tight');
+      line-height: 1.2;
       position: relative;
     }
 
@@ -38,23 +44,23 @@
     blockquote {
       border-left: .4rem solid var(--color-theme-primary-glare);
       margin-left: 0;
-      padding-left: get-size(500);
+      padding-left: functions.get-size(500);
       font-style: italic;
-      font-size: get-size(600);
+      font-size: functions.get-size(600);
 
       p {
         opacity: .85;
-        padding: get-size(500) 0;
+        padding: functions.get-size(500) 0;
       }
     }
 
     ol:not([class]),
     ul:not([class]) {
-      margin-left: get-size(800);
+      margin-left: functions.get-size(800);
       margin-bottom: 1rem;
 
       li + li {
-        margin-top: get-size(300);
+        margin-top: functions.get-size(300);
       }
     }
 
@@ -64,7 +70,7 @@
     .video-player,
     .video-player + *,
     video {
-      --flow-space: #{get-size('max')};
+      --flow-space: #{functions.get-size('max')};
     }
 
     figure,
@@ -72,7 +78,7 @@
     .video-player,
     video {
       width: 100%;
-      max-width: map-get($metrics, 'wrap-max-width');
+      max-width: map.get(config.$metrics, 'wrap-max-width');
       position: relative;
     }
 
@@ -84,9 +90,9 @@
     figcaption {
       font-size: .8em;
       font-style: italic;
-      max-width: map-get($metrics, 'wrap-inner-max-width');
+      max-width: map.get(config.$metrics, 'wrap-inner-max-width');
       margin: .5rem auto 0;
-      padding: 0 get-size(500);
+      padding: 0 functions.get-size(500);
     }
 
     .post-info {
@@ -103,8 +109,8 @@
     pre > code {
       display: block;
       background: var(--color-dark);
-      padding: get-size(700);
+      padding: functions.get-size(700);
-      font-size: get-size(500);
+      font-size: functions.get-size(500);
     }
 
     // page specific
@@ -288,7 +294,7 @@
           }
 
           h2 {
-            @include apply-utility('font', 'base');
+            font-family: #{map.get(tokens.$tokens, 'fonts', 'base')};
             text-align: left;
             font-weight: 600;
             margin-bottom: 1rem;
@@ -328,7 +334,7 @@
 
     h2 {
       flex-shrink: 0;
-      margin-right: get-size('base');
+      margin-right: functions.get-size('base');
       color: var(--color-dark);
     }
 

src/scss/components/_skip-link.scss

@@ -1,3 +1,6 @@
+@use '../functions';
+@use '../utilities/visually-hidden';
+
 .skip-link:not(:focus) {
   @extend %visually-hidden;
 }
@@ -7,7 +10,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  padding: get-size(300) get-size(500) get-size('base') get-size(500);
+  padding: functions.get-size(300) functions.get-size(500) functions.get-size('base') functions.get-size(500);
   background-color: var(--color-action-bg);
   color: var(--color-action-text);
   line-height: 1;

src/scss/components/_video-player.scss

@@ -2,7 +2,7 @@
   position: relative;
   padding-top: 56.25%;
   
-  @include media-query('md') {
+  @media (min-width: 48rem) {
     .post & {
       padding-top: 66%;
     }

src/scss/global.scss

@@ -1,12 +1,38 @@
-@import 'config';
+@use 'config';
+@use 'functions';
+@use 'sass:map';
+@use 'sass:list';
+@use 'theme';
+@use 'typography';
 
-// Pull in the stalfos lib
+// Utils
-@import '../../node_modules/stalfos/stalfos';
+@use 'utilities/inner-wrapper';
+@use 'utilities/visually-hidden';
+@use 'utilities/wrapper';
 
-@import 'theme';
+// Components
-
+@use 'components/button';
-// Local dependencies
+@use 'components/faq';
-@import 'typography';
+@use 'components/form';
+@use 'components/heading-permalink';
+@use 'components/intro';
+@use 'components/nav';
+@use 'components/posts';
+@use 'components/post';
+@use 'components/meeting';
+@use 'components/member';
+@use 'components/member-list';
+@use 'components/modal';
+@use 'components/posts-list';
+@use 'components/presentation';
+@use 'components/site-head';
+@use 'components/site-foot';
+@use 'components/partner';
+@use 'components/skip-link';
+@use 'components/video-player';
+@use 'components/search-bar';
+@use 'components/tags';
+@use 'utilities/responsive';
 
 /**
  * GLOBAL STYLES
@@ -36,12 +62,13 @@ hr {
   max-width: 500px;
   background: var(--color-stroke);
   border: 0;
-  margin: get-size(900) auto;
+  margin: functions.get-size(900) auto;
 }
 
 // For when metric attributes are added to img elements
 img {
   height: auto;
+  max-width: 100%;
 }
 
 :focus {
@@ -49,35 +76,24 @@ img {
   outline-offset: .25rem;
 }
 
-/**
+body,
- * PROJECT IMPORTS
+dd,
- */
+dl,
-
+dt,
-// Utils
+figcaption,
-@import 'utilities/inner-wrapper';
+figure,
-@import 'utilities/visually-hidden';
+h1,
-@import 'utilities/wrapper';
+h2,
-
+h3,
-// Components
+h4,
-@import 'components/button';
+li,
-@import 'components/faq';
+ol,
-@import 'components/form';
+p,
-@import 'components/heading-permalink';
+ul {
-@import 'components/intro';
+  margin: 0;
-@import 'components/nav';
+  padding: 0;
-@import 'components/posts';
+}
-@import 'components/post';
+ol[class],
-@import 'components/meeting';
+ul[class] {
-@import 'components/member';
+  list-style: none;
-@import 'components/member-list';
+}
-@import 'components/modal';
-@import 'components/posts-list';
-@import 'components/presentation';
-@import 'components/site-head';
-@import 'components/site-foot';
-@import 'components/partner';
-@import 'components/skip-link';
-@import 'components/video-player';
-@import 'components/search-bar';
-@import 'components/tags';
-@import 'utilities/responsive';

src/scss/utilities/_inner-wrapper.scss

@@ -1,7 +1,11 @@
+@use '../config';
+@use '../functions';
+@use 'sass:map';
+
 .inner-wrapper {
-  max-width: map-get($metrics, 'wrap-inner-max-width');
+  max-width: map.get(config.$metrics, 'wrap-inner-max-width');
   margin-left: auto;
   margin-right: auto;
-  padding-left: get-size(500);
+  padding-left: functions.get-size(500);
-  padding-right: get-size(500);
+  padding-right: functions.get-size(500);
 }

src/scss/utilities/_wrapper.scss

@@ -1,7 +1,11 @@
+@use '../config';
+@use '../functions';
+@use 'sass:map';
+
 .wrapper {
-  max-width: map-get($metrics, 'wrap-max-width');
+  max-width: map.get(config.$metrics, 'wrap-max-width');
   margin-left: auto;
   margin-right: auto;
-  padding-left: get-size(500);
+  padding-left: functions.get-size(500);
-  padding-right: get-size(500);
+  padding-right: functions.get-size(500);
 }

src/transforms/html-min-transform.js

@@ -1,4 +1,4 @@
-import htmlmin from 'html-minifier';
+import htmlmin from 'html-minifier-terser';
 
 export default function htmlMinTransform(value, outputPath) {
   if (outputPath.indexOf('.html') > -1) {

src/transforms/parse-transform.js

@@ -1,4 +1,4 @@
-import {JSDOM} from '@tbranyen/jsdom';
+import {JSDOM} from 'jsdom';
 import minify from '../utils/minify.js';
 import slugify from 'slugify';
 import getSize from 'image-size';