fix(tailwind): new typography config for tailwind to use with typogra…

…phy plugin + fixed font vars (#914) BREAKING CHANGE: More info on this can be found in the ZeroHeight docs under Tailwind configuration.
chanzuckerberg · Dec 4, 2024 · cc895e8 · cc895e8
1 parent 9fcc525
commit cc895e8
Show file tree

Hide file tree

Showing 2 changed files with 1,131 additions and 276 deletions.
diff --git a/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs b/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs
@@ -88,55 +88,84 @@ function transformIconSizes(tokens, options = {}) {
 }
 
 function transformFonts(tokens, keys, options = {}) {
-  const fontSize = { narrow: {}, wide: {} };
-  const lineHeight = { narrow: {}, wide: {} };
-  const letterSpacing = { narrow: {}, wide: {} };
-  const fontVariantNumeric = { narrow: {}, wide: {} };
-  const textTransform = { narrow: {}, wide: {} };
-
-  const TEXT_TRANSFORM = "text-transform";
-  const FONT_VARIANT_NUMERIC = "font-variant-numeric";
-
-  function makeFontValue(fontValue, name) {
-    const parsedWideFont = cssFont.parse(fontValue.font.value);
-    const parsedNarrowFont = cssFont.parse(fontValue.font.narrowValue);
-
-    // Wide Style Fonts
-    fontSize.wide[name] = parsedWideFont.size;
-    lineHeight.wide[name] = parsedWideFont.size;
-    letterSpacing.wide[name] = fontValue["letter-spacing"].value;
-    textTransform.wide[name] = fontValue[TEXT_TRANSFORM]
-      ? fontValue[TEXT_TRANSFORM].value
-      : "none";
-    fontVariantNumeric.wide[name] = fontValue[FONT_VARIANT_NUMERIC]
-      ? fontValue[FONT_VARIANT_NUMERIC].value
-      : "normal";
-
-    // Narrow Style Fonts
-    fontSize.narrow[name] = parsedNarrowFont.size;
-    lineHeight.narrow[name] = parsedNarrowFont.size;
-    letterSpacing.narrow[name] = fontValue["letter-spacing"].narrowValue;
-    textTransform.narrow[name] = fontValue[TEXT_TRANSFORM]
-      ? fontValue[TEXT_TRANSFORM].narrowValue
-      : "none";
-    fontVariantNumeric.narrow[name] = fontValue[FONT_VARIANT_NUMERIC]
-      ? fontValue[FONT_VARIANT_NUMERIC].narrowValue
-      : "normal";
-  }
+  /**
+   * (masoudmanson): This will be used for generating the font
+   * specific tailwind config.
+   */
+  const fontData = {
+    fontSize: {},
+    fontVariantNumeric: {},
+    letterSpacing: {},
+    lineHeight: {},
+    textTransform: {},
+  };
 
-  for (const key of keys) {
-    for (const [size, fonts] of Object.entries(tokens[key])) {
-      for (const [, fontValue] of Object.entries(fonts)) {
-        makeFontValue(fontValue, getName([key, size], options));
-      }
-    }
-  }
+  /**
+   * (masoudmanson): Generates a typography object compatible with Tailwind's typography plugin.
+   * Example usage in a Tailwind config file:
+   *
+   * const typography = require('@tailwindcss/typography')
+   * const sdsTailwindConfig = require("@czi-sds/components/dist/tailwind.json");
+   *
+   * module.exports = {
+   *  mode: 'jit',
+   *  content: [...],
+   *  theme: {
+   *    extend: {
+   *      ...sdsTailwindConfig
+   *    }
+   *  },
+   *  plugins: [typography],
+   *}
+   *
+   * And it can be used in the html like:
+   *
+   * <p class="prose prose-sds-header-xs-600-wide">...</p>
+   */
+  const typography = {};
+
+  keys.forEach((key) => {
+    Object.entries(tokens[key]).forEach(([size, fontVariants]) => {
+      Object.entries(fontVariants).forEach(([_, fontValue]) => {
+        const name = getName([key, size], options);
+        addFontData(typography, fontData, fontValue, name);
+      });
+    });
+  });
 
   return {
-    fontSize,
-    fontVariantNumeric,
-    letterSpacing,
-    lineHeight,
-    textTransform,
+    ...fontData,
+    typography,
   };
 }
+
+function addFontData(typography, data, fontValue, name) {
+  const fontTypes = {
+    narrow: cssFont.parse(fontValue.font.narrowValue),
+    wide: cssFont.parse(fontValue.font.value),
+  };
+
+  Object.entries(fontTypes).forEach(([type, parsedFont]) => {
+    const key = `${name}-${parsedFont.weight}-${type}`;
+    const sharedStyles = {
+      fontFamily: parsedFont.family.join(", "),
+      fontSize: parsedFont.size,
+      fontStyle: parsedFont.style,
+      fontVariantNumeric: fontValue["font-variant-numeric"]?.value || "normal",
+      fontWeight: parsedFont.weight,
+      letterSpacing: fontValue["letter-spacing"].value || "0px",
+      lineHeight: parsedFont.lineHeight,
+      textTransform: fontValue["text-transform"]?.value || "none",
+    };
+
+    // Add to typography
+    typography[key] = { css: sharedStyles };
+
+    // Add to font data
+    data.fontSize[key] = parsedFont.size;
+    data.lineHeight[key] = parsedFont.lineHeight;
+    data.letterSpacing[key] = sharedStyles.letterSpacing;
+    data.textTransform[key] = sharedStyles.textTransform;
+    data.fontVariantNumeric[key] = sharedStyles.fontVariantNumeric;
+  });
+}