refactor: ♻️ refactor build process to make _template.scss obsolete

arma-events · Jul 9, 2024 · f8053fb · f8053fb
1 parent 3a5c65a
commit f8053fb
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 140 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -52,9 +52,9 @@ This directory contains all fonts that should be built. Each font has a subdirec
   | `weight` | `200 900` | Value to set for [`font-weight`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight) in the [`@font-face` at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) |
   | `fallbackFontFamily` | `Trebuchet MS` | Name of the fallback font family to use. `" Italic"` is automatically appended for the italic style. See the `fallback_fonts/`-directory for possible values. |
 
-### `_template.scss`
+#### `index.scss`
 
-This file includes all the logic to generate the output scss and css files. It is loaded in the `index.scss`, which is auto generated by the build script. But the `index.scss` does not include any logic. It just loads the `_template.scss` with the correct values for base path, unicode ranges, fonts as well as font weights.
+This file includes all the logic to generate the output scss and css files. It is copied to the dist directory and loads all build-specific values (included fonts configured weight, styles and unicode ranges) from the `_build_info_.scss`, which is autogenerated during build.
 
 ### `unicode_ranges.json`
 

diff --git a/_template.scss b/_template.scss
diff --git a/build/index.js b/build/index.js
@@ -10,7 +10,7 @@ import prettyBytes from 'pretty-bytes';
 import chalk from 'chalk';
 import { loadFontConfig } from './config.js';
 import { IN_DIR, OUT_DIR, ROOT_DIR, STYLES, TEST_APP_DIR, UNICODE_RANGES } from './consts.js';
-import { renderIndexSCSS } from './scss.js';
+import { arrayToScssList, objToScssMap } from './scss.js';
 import { renderFallbackFontsSCSS } from './fallback.js';
 import { coloredPath } from './utils.js';
 
@@ -36,11 +36,28 @@ console.log(
 );
 console.log('');
 
-// _template.scss
+// index.scss
+{
+  const path = join(OUT_DIR, 'index.scss');
+  await copyFile(join(ROOT_DIR, 'index.scss'), path);
+  console.log('✅ Copied index.scss to', coloredPath(path));
+}
+
+// _build_info.scss
 {
-  const path = join(OUT_DIR, '_template.scss');
-  await copyFile(join(ROOT_DIR, '_template.scss'), path);
-  console.log('✅ Copied _template.scss to', coloredPath(path));
+  const path = join(OUT_DIR, '_build_info.scss');
+  await writeFile(
+    path,
+    [
+      `@use 'sass:map';`,
+      `$families: ${arrayToScssList(Object.keys(CONFIGS))};`,
+      `$styles: ${arrayToScssList(STYLES)};`,
+      `$weights: ${objToScssMap(Object.fromEntries(Object.entries(CONFIGS).map(([k, v]) => [k, v.weight])))};`,
+      `$unicode-ranges: ${objToScssMap(UNICODE_RANGES)};`,
+      `$ranges: map.keys($unicode-ranges)`,
+    ].join('\n'),
+  );
+  console.log('📝 Wrote build infos to', coloredPath(path));
 }
 
 // _fallback_fonts.scss
@@ -50,13 +67,6 @@ console.log('');
   console.log('📝 Wrote Fallback Fonts to', coloredPath(path));
 }
 
-// index.scss
-{
-  const path = join(OUT_DIR, 'index.scss');
-  await writeFile(path, renderIndexSCSS(CONFIGS), 'utf-8');
-  console.log('📝 Wrote', coloredPath(path));
-}
-
 // index.css
 {
   const result = await compileAsync(join(OUT_DIR, 'index.scss'));

diff --git a/build/scss.js b/build/scss.js
@@ -18,57 +18,3 @@ export function objToScssMap(obj) {
 export function arrayToScssList(arr) {
   return '(' + arr.map((x) => `'${x}'`).join(',') + ')';
 }
-
-/**
- * @param {Record<string, Awaited<ReturnType<import('./config')['loadFontConfig']>>>} configs
- */
-export function renderIndexSCSS(configs) {
-  const fonts = arrayToScssList(Object.keys(configs));
-
-  const unicodeRanges = objToScssMap(UNICODE_RANGES);
-
-  const weights = objToScssMap(Object.fromEntries(Object.entries(configs).map(([k, v]) => [k, v.weight])));
-
-  return `$base-path: '@arma-events/web-fonts/dist/woff2' !default;
-$families: ${fonts} !default;
-$styles: ${arrayToScssList(STYLES)} !default;
-$ranges: ${arrayToScssList(Object.keys(UNICODE_RANGES))} !default;
-
-@use 'sass:list';
-
-
-@use './_fallback_fonts.scss' with (
-  $families: $families,
-  $styles: $styles,
-);
-
-@use './_template.scss' with (
-  $base-path: $base-path,
-  $named-unicode-ranges: ${unicodeRanges},
-  $ranges: $ranges,
-  $families: $families,
-  $styles: $styles,
-  $weights: ${weights},
-);
-
-$-available-styles: ${arrayToScssList(STYLES)};
-@each $style in $styles {
- @if not list.index($-available-styles, $style) {
-    @error "#{$style} is not a valid style. Expected one of #{$-available-styles}.";
-  }
-}
-
-$-available-families: ${fonts};
-@each $family in $families {
- @if not list.index($-available-families, $family) {
-    @error "#{$family} is not a valid family. Expected one of #{$-available-families}.";
-  }
-}
-
-$-available-ranges: ${arrayToScssList(Object.keys(UNICODE_RANGES))};
-@each $range in $ranges {
- @if not list.index($-available-ranges, $range) {
-    @error "#{$range} is not a valid range. Expected one of #{$-available-ranges}.";
-  }
-}`;
-}
diff --git a/index.scss b/index.scss
@@ -0,0 +1,91 @@
+@use './_build_info.scss' as build-info;
+
+$base-path: '@arma-events/web-fonts/dist/woff2' !default;
+$families: build-info.$families !default;
+$styles: build-info.$styles !default;
+$ranges: build-info.$ranges !default;
+
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+
+@use './_fallback_fonts.scss' with (
+  $families: $families,
+  $styles: $styles
+);
+
+// check if invalid styles were passed
+@each $style in $styles {
+  @if not list.index(build-info.$styles, $style) {
+    @error "#{$style} is not a valid style. Expected one of #$build-info.$styles}.";
+  }
+}
+
+// check if invalid families were passed
+@each $family in $families {
+  @if not list.index(build-info.$families, $family) {
+    @error "#{$family} is not a valid family. Expected one of #{build-info.$families}.";
+  }
+}
+
+// check if invalid ranges were passed
+@each $range in $ranges {
+  @if not list.index(build-info.$ranges, $range) {
+    @error "#{$range} is not a valid range. Expected one of #{build-info.$ranges}.";
+  }
+}
+
+@mixin -default-descriptors($family) {
+  font-family: $family;
+  font-display: swap;
+  @if map.has-key(build-info.$weights, $family) {
+    font-weight: string.unquote(map.get(build-info.$weights, $family));
+  } @else {
+    font-weight: 200 900;
+  }
+}
+
+@function -path($family, $style, $subset) {
+  @return '#{$base-path}/#{$family}/#{$style}.#{$subset}.woff2';
+}
+
+@each $family in $families {
+  @each $subset in $ranges {
+    $range: map.get(build-info.$unicode-ranges, $subset);
+    @each $style in $styles {
+      @font-face {
+        @include -default-descriptors($family);
+        font-style: string.unquote($style);
+
+        src: local('#{$family}'), url(-path($family, $style, $subset)) format('woff2-variations');
+        unicode-range: string.unquote($range);
+      }
+    }
+  }
+}
+
+@if list.index($families, 'Source Sans 3') and list.index($ranges, 'latin') {
+  /* Source Sans 3: use ∞ Symbol (U+221E) from Raleway */
+  @each $style in $styles {
+    @font-face {
+      @include -default-descriptors('Source Sans 3');
+      font-style: string.unquote($style);
+
+      src: local('Raleway'), url(-path('Raleway', $style, 'latin')) format('woff2-variations');
+      unicode-range: U+221E;
+    }
+  }
+}
+
+@if list.index($families, 'Raleway') and list.index($ranges, 'latin') {
+  /* Raleway: use @ Symbol (U+0040) from Source Sans 3 */
+  @each $style in $styles {
+    @font-face {
+      @include -default-descriptors('Raleway');
+      font-style: string.unquote($style);
+
+      src: local('Source Sans 3'), url(-path('Source Sans 3', $style, 'latin')) format('woff2-variations');
+      unicode-range: U+0040;
+    }
+  }
+}