fix(design-system): Fixed token font build issue

sullivanpj · Nov 7, 2022 · d59e002 · d59e002
1 parent 1587d2e
commit d59e002
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 99 deletions.
diff --git a/apps/web/shell/tailwind.config.js b/apps/web/shell/tailwind.config.js
@@ -1,7 +1,6 @@
 const { createGlobPatternsForDependencies } = require("@nrwl/react/tailwind");
 const { join } = require("path");
-const theme = require("../../../dist/design-system/tokens/js/theme");
-
+const extend = require("../../../dist/design-system/tokens/js/theme");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -13,10 +12,7 @@ module.exports = {
     ...createGlobPatternsForDependencies(__dirname),
   ],
   theme: {
-    colors: {
-      ...theme?.colors
-    },
-    extend: {},
+    extend,
   },
   plugins: [],
 };
diff --git a/design-system/tokens/project.json b/design-system/tokens/project.json
@@ -30,7 +30,7 @@
           "imagesDir": "assets/images"
         },
         "resume": {
-          "tokensDir": "design-system/tokens/src/resume1",
+          "tokensDir": "design-system/tokens/src/resume0",
           "fontsDir": "assets/fonts",
           "imagesDir": "assets/images"
         }

diff --git a/tools/executors/typescript/design-components-build/impl.ts b/tools/executors/typescript/design-components-build/impl.ts
@@ -18,21 +18,7 @@ export default async function (
       printInfo("Cleaning previous design components build...");
 
       result = await execute(
-        `attrib +r "dist/design-system/components/package.json"`
-      );
-      if (result) {
-        printError(result);
-        return { success: false };
-      }
-
-      result = await execute(`del "dist/design-system/components"`);
-      if (result) {
-        printError(result);
-        return { success: false };
-      }
-
-      result = await execute(
-        `attrib -r "dist/design-system/components/package.json"`
+        `rimraf dist/design-system/components/!("package.json")`
       );
       if (result) {
         printError(result);

diff --git a/tools/executors/typescript/design-tokens-build/impl.ts b/tools/executors/typescript/design-tokens-build/impl.ts
@@ -110,26 +110,20 @@ export default async function (
                   if (name && token.value) {
                     const item = {
                       id: name,
-                      type: "textStyle",
                       name,
                       ...token,
+                      type: "textStyle",
+                      value: {
+                        font: {
+                          name: token.value?.fontFamily
+                            ?.replaceAll(/[_]/g, "")
+                            ?.replaceAll(/\s/g, ""),
+                          value: {
+                            ...token.value,
+                          },
+                        },
+                      },
                     };
-                    printInfo(JSON.stringify(item, null, 2));
-
-                    !item.value && (item.value = {});
-
-                    if (token.value?.fontFamily) {
-                      printInfo(`Adding font: ${token.value?.fontFamily}`);
-                      printInfo(
-                        JSON.stringify(token.value?.fontFamily, null, 2)
-                      );
-
-                      item.value.font = {
-                        name: token.value?.fontFamily
-                          ?.replaceAll(/[_]/g, "")
-                          ?.replaceAll(/\s/g, ""),
-                      };
-                    }
 
                     ret.push(item);
                   }
@@ -141,7 +135,7 @@ export default async function (
             : []),
         ],
         {
-          formatName: "camelCase",
+          formatName: "kebabCase",
           formatConfig: {
             objectName: "extend",
             exportDefault: true,

diff --git a/...ecutors/typescript/utilities/design-token-parsers/parsers/to-tailwind/tokens/textStyle.ts b/...ecutors/typescript/utilities/design-token-parsers/parsers/to-tailwind/tokens/textStyle.ts
@@ -1,9 +1,14 @@
-import tinycolor from 'tinycolor2';
-import convertMeasurement from '../../../libs/size-manipulation';
-import { FontToken, TextStyleToken } from '../../../types';
-import { FormatTokenType, OptionsType } from '../to-tailwind.parser';
-import { ColorsFormat, TailwindMappingTypes, TextStyleMapping } from '../to-tailwind.type';
-import { Utils } from './index';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import tinycolor from "tinycolor2";
+import convertMeasurement from "../../../libs/size-manipulation";
+import { FontToken, TextStyleToken } from "../../../types";
+import { FormatTokenType, OptionsType } from "../to-tailwind.parser";
+import {
+  ColorsFormat,
+  TailwindMappingTypes,
+  TextStyleMapping,
+} from "../to-tailwind.type";
+import { Utils } from "./index";
 
 export class TextStyle extends TextStyleToken {
   token: Partial<TextStyleToken>;
@@ -17,14 +22,19 @@ export class TextStyle extends TextStyleToken {
   }
   private getLetterSpacing() {
     const ls = this.value.letterSpacing;
-    if (ls?.value) {
-      return `${ls.value.measure}${ls.value.unit}`;
+    if (ls?.value || (this.value?.font?.value as any)?.ls) {
+      return `${
+        ls?.value?.measure ?? (this.value?.font?.value as any)?.ls ?? 0
+      }${ls?.value?.unit ?? "%"}`;
     }
+
     return undefined;
   }
   private getLineHeight() {
     const lh = this.value.lineHeight;
-    return `${lh?.value?.measure ?? 0}${lh?.value?.unit ?? "px"}`;
+    return `${
+      lh?.value?.measure ?? (this.value?.font?.value as any)?.lineHeight ?? 0
+    }${lh?.value?.unit ?? "px"}`;
   }
   private getColor(format: ColorsFormat) {
     if (this.value.color?.value) {
@@ -39,15 +49,22 @@ export class TextStyle extends TextStyleToken {
   }
 
   private getFontFamily() {
-    return (this?.value?.font as FontToken)?.name ?? this.value?.font?.value?.fontPostScriptName;
+    return (
+      (this?.value?.font as FontToken)?.name ??
+      this.value?.font?.value?.fontPostScriptName
+    );
   }
 
-  private getFontSize(fontFormat: FormatTokenType['fontSizeFormat']) {
+  private getFontSize(fontFormat: FormatTokenType["fontSizeFormat"]) {
     const fontSize = this.value.fontSize;
-    if (fontFormat?.unit && this.value.fontSize.value.unit !== fontFormat?.unit) {
-      this.value.fontSize.value = convertMeasurement(this.value.fontSize.value, fontFormat?.unit);
+    if (fontFormat?.unit && fontSize?.value?.unit !== fontFormat?.unit) {
+      fontSize.value = convertMeasurement(fontSize.value, fontFormat?.unit);
     }
-    return `${fontSize?.value?.measure ?? 0}${fontSize?.value?.unit ?? "px"}`;
+    return `${
+      fontSize?.value?.measure ??
+      (this.value?.font?.value as any)?.fontSize ??
+      0
+    }${fontSize?.value?.unit ?? "px"}`;
   }
 
   generate(options: OptionsType): TextStyleMapping {
@@ -56,85 +73,81 @@ export class TextStyle extends TextStyleToken {
     result.fontSize = Utils.go<ConstructorParameters<typeof TextStyleToken>[0]>(
       this.token,
       options,
-      'fontSize',
-      this.getFontSize(options?.formatTokens?.fontSizeFormat),
+      "fontSize",
+      this.getFontSize(options?.formatTokens?.fontSizeFormat)
     );
 
     const letterSpacing = this.getLetterSpacing();
     if (letterSpacing) {
-      result.letterSpacing = Utils.go<ConstructorParameters<typeof TextStyleToken>[0]>(
-        this.token,
-        options,
-        'letterSpacing',
-        letterSpacing,
-      );
+      result.letterSpacing = Utils.go<
+        ConstructorParameters<typeof TextStyleToken>[0]
+      >(this.token, options, "letterSpacing", letterSpacing);
     }
 
     const lineHeight = this.getLineHeight();
-    result.lineHeight = Utils.go<ConstructorParameters<typeof TextStyleToken>[0]>(
-      this.token,
-      options,
-      'lineHeight',
-      lineHeight,
-    );
+    result.lineHeight = Utils.go<
+      ConstructorParameters<typeof TextStyleToken>[0]
+    >(this.token, options, "lineHeight", lineHeight);
 
-    const textColor = this.getColor(options?.formatTokens?.colorFormat?.format || 'hex');
+    const textColor = this.getColor(
+      options?.formatTokens?.colorFormat?.format || "hex"
+    );
     if (textColor) {
-      result.textColor = Utils.go<ConstructorParameters<typeof TextStyleToken>[0]>(
-        this.token,
-        options,
-        'textColor',
-        textColor,
-      );
+      result.textColor = Utils.go<
+        ConstructorParameters<typeof TextStyleToken>[0]
+      >(this.token, options, "textColor", textColor);
     }
 
     const textOpacity = this.getOpacity();
     if (textOpacity) {
-      result.textOpacity = Utils.go<ConstructorParameters<typeof TextStyleToken>[0]>(
-        this.token,
-        options,
-        'textOpacity',
-        textOpacity,
-      );
+      result.textOpacity = Utils.go<
+        ConstructorParameters<typeof TextStyleToken>[0]
+      >(this.token, options, "textOpacity", textOpacity);
     }
 
     const fontFamily = this.getFontFamily();
-    result.fontFamily = Utils.go<ConstructorParameters<typeof TextStyleToken>[0]>(
-      this.token,
-      options,
-      'fontFamily',
-      [fontFamily],
-    );
+    result.fontFamily = Utils.go<
+      ConstructorParameters<typeof TextStyleToken>[0]
+    >(this.token, options, "fontFamily", [fontFamily, "sans-serif"]);
 
     const fontWeight = this.getFontWeight();
-    result.fontWeight = Utils.go<ConstructorParameters<typeof TextStyleToken>[0]>(
-      this.token,
-      options,
-      'fontWeight',
-      fontWeight,
-    );
+    result.fontWeight = Utils.go<
+      ConstructorParameters<typeof TextStyleToken>[0]
+    >(this.token, options, "fontWeight", fontWeight);
 
     return result;
   }
 
   static afterGenerate(TailwindTokens: TailwindMappingTypes) {
     if (TailwindTokens.fontSize)
-      TailwindTokens.fontSize = Utils.sortObjectByValue(TailwindTokens.fontSize);
+      TailwindTokens.fontSize = Utils.sortObjectByValue(
+        TailwindTokens.fontSize
+      );
 
     if (TailwindTokens.fontWeight)
-      TailwindTokens.fontWeight = Utils.sortObjectByValue(TailwindTokens.fontWeight);
+      TailwindTokens.fontWeight = Utils.sortObjectByValue(
+        TailwindTokens.fontWeight
+      );
 
     if (TailwindTokens.lineHeight)
-      TailwindTokens.lineHeight = Utils.sortObjectByValue(TailwindTokens.lineHeight);
+      TailwindTokens.lineHeight = Utils.sortObjectByValue(
+        TailwindTokens.lineHeight
+      );
 
     if (TailwindTokens.letterSpacing)
-      TailwindTokens.letterSpacing = Utils.sortObjectByValue(TailwindTokens.letterSpacing);
+      TailwindTokens.letterSpacing = Utils.sortObjectByValue(
+        TailwindTokens.letterSpacing
+      );
 
     if (TailwindTokens.textColor)
-      TailwindTokens.textColor = Utils.sortObjectByValue(TailwindTokens.textColor);
+      TailwindTokens.textColor = Utils.sortObjectByValue(
+        TailwindTokens.textColor
+      );
 
     if (TailwindTokens.textOpacity)
-      TailwindTokens.textOpacity = Utils.sortObjectByValue(TailwindTokens.textOpacity);
+      TailwindTokens.textOpacity = Utils.sortObjectByValue(
+        TailwindTokens.textOpacity
+      );
 
     return TailwindTokens;
   }