@meetdomaine/tailwind-syrah - npm Package Compare versions

Comparing version 1.0.17 to 1.0.18

package.json

 {
   "name": "@meetdomaine/tailwind-syrah",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "A TailwindCSS plugin for Domaine",
@@ -5,0 +5,0 @@ "main": "src/index.ts",

src/addTypography/index.ts

 import type {
   FlattenedManidestTypographySection,
   FontFamilyMapping,
+  FontWeightMapping,
   ManifestTypographySection,
@@ -21,2 +22,3 @@ } from "../types";
   fontMapping?: FontFamilyMapping,
+  fontWeightMapping?: FontWeightMapping,
   fluidTypography = true
@@ -42,2 +44,3 @@ ) => {
           fontMapping,
+          fontWeightMapping,
           fluidTypography
@@ -50,2 +53,3 @@ );
         fontMapping,
+        fontWeightMapping,
         false
@@ -70,2 +74,3 @@ );
   fontMapping?: FontFamilyMapping,
+  fontWeightMapping?: FontWeightMapping,
   fluidTypography = true
@@ -76,3 +81,9 @@ ) => {
     const typography = flattenTypeSection(typeStyles.data);
-    generateComponents(typography, pluginAPI, fontMapping, fluidTypography);
+    generateComponents(
+      typography,
+      pluginAPI,
+      fontMapping,
+      fontWeightMapping,
+      fluidTypography
+    );
   } else {
@@ -79,0 +90,0 @@ consoleError(typeStyles.error.message, "Manifest Typography Error");

src/addTypography/schemas.ts

@@ -63,2 +63,3 @@ import { z } from "zod";
     fontStyle: (textStyle || "normal") as string,
+    fontNameStyle: data,
   };
@@ -98,2 +99,3 @@ });
   fontStyle: z.string().optional(),
+  fontNameStyle: z.string().optional(),
 });
@@ -100,0 +102,0 @@

src/addTypography/utils.ts

@@ -7,2 +7,3 @@ import set from "lodash/set";
   FontFamilyMapping,
+  FontWeightMapping,
 } from "../types";
@@ -42,3 +43,4 @@ import type { ManifestTextStyle } from "./schemas";
   manifestFontFamily: string,
-  fontMapping?: FontFamilyMapping
+  fontMapping?: FontFamilyMapping,
+  asVariable = true
 ) => {
@@ -61,5 +63,34 @@ if (!fontMapping) {
 
-  return getFontFamilyVariable(currentValue) ?? manifestFontFamily;
+  return asVariable ? getFontFamilyVariable(currentValue) : currentValue;
 };
 
+export const getFontWeightFromMapping = (
+  manifestFontFamily: string,
+  fontMapping?: FontFamilyMapping,
+  fontNameStyle?: string | undefined,
+  fontWeightMapping?: FontWeightMapping
+): number | null => {
+  if (!fontWeightMapping || !fontMapping || !fontNameStyle) {
+    return null;
+  }
+  const fontFamilyLabel = getFontFamilyFromMapping(
+    manifestFontFamily,
+    fontMapping,
+    false
+  );
+
+  const currentFamily: Record<string, number> | null = get(
+    fontWeightMapping,
+    fontFamilyLabel,
+    null
+  );
+
+  if (currentFamily === null) {
+    return null;
+  }
+
+  const currentWeight: number | null = get(currentFamily, fontNameStyle, null);
+  return currentWeight;
+};
+
 export const getCSSRuleObjectForVariant = (
@@ -69,4 +100,21 @@ mobileConfig: ManifestTextStyle,
   fontMapping?: FontFamilyMapping,
+  fontWeightMapping?: FontWeightMapping,
   withFluidSize = true
 ) => {
+  const mobileFontWeight = getFontWeightFromMapping(
+    mobileConfig.fontFamily,
+    fontMapping,
+    // @ts-ignore
+    mobileConfig.fontNameStyle,
+    fontWeightMapping
+  );
+
+  const desktopFontWeight = getFontWeightFromMapping(
+    desktopConfig.fontFamily,
+    fontMapping,
+    // @ts-ignore
+    desktopConfig.fontNameStyle,
+    fontWeightMapping
+  );
+
   return {
@@ -79,3 +127,4 @@ // Add Common styles
     // Add mobile styles
-    ...omit(mobileConfig, ["fontSize", "fontFamily"]),
+    ...omit(mobileConfig, ["fontSize", "fontFamily", "fontNameStyle"]),
+    ...(mobileFontWeight ? { fontWeight: mobileFontWeight } : {}),
 
@@ -89,5 +138,6 @@ // Add desktop styles
       ),
-      ...omit(desktopConfig, ["fontSize", "fontFamily"]),
+      ...omit(desktopConfig, ["fontSize", "fontFamily", "fontNameStyle"]),
+      ...(desktopFontWeight ? { fontWeight: desktopFontWeight } : {}),
     },
   } satisfies CSSRuleObject;
 };

src/index.ts

@@ -10,3 +10,7 @@ import plugin from "tailwindcss/plugin";
 import { consoleError } from "./utils";
-import type { ExtendedConfig, FontFamilyMapping } from "./types";
+import type {
+  ExtendedConfig,
+  FontFamilyMapping,
+  FontWeightMapping,
+} from "./types";
 import addSizing, { addBorderRadius } from "./addSizing";
@@ -21,3 +25,31 @@ import addFluidHelper from "./addFluidHelper";
   sizing?: boolean;
+  /**
+   * Font family mapping for each font family in the manifest, the fontName should match the font family in the manifest and the value one of the keys from FontFamilyKey
+   *
+   * @type {object}
+   * @property {string} fontName - The font family name from the manifest
+   * @example
+   * {
+   *   "PP Editorial New": "Primary",
+   *   "Maison Neue": "Secondary",
+   *   "NB Akademie Std": "Tertiary",
+   * }
+   */
   fontMapping?: FontFamilyMapping;
+  /**
+   * Font weight mapping for each font family
+   *
+   * Provide the font family and the font weight mapping for each font family
+   *
+   * @example
+   * {
+   *  "Primary": {
+   *    "Light Italic": 300,
+   *    "Regular": 400,
+   *    "Bold": 700,
+   *    "Mono": 450
+   *   }
+   * }
+   */
+  fontWeightMapping?: FontWeightMapping;
   fluidTypography?: boolean;
@@ -44,2 +76,3 @@ buttons?: boolean;
   fontMapping,
+  fontWeightMapping,
   buttons = true,
@@ -60,2 +93,3 @@ }: DomainTWOptions) {
         fontMapping,
+        fontWeightMapping,
         fluidTypography
@@ -62,0 +96,0 @@ );

src/types.d.ts

@@ -1,23 +0,26 @@
-import type { Config } from 'tailwindcss'
-import type { ManifestTextStyle } from './addTypography/schemas'
+import type { Config } from "tailwindcss";
+import type { ManifestTextStyle } from "./addTypography/schemas";
 
-export type FigmaTypography = TextStyle
+export type FigmaTypography = TextStyle;
 export type TypeScreenSizes<T> = {
-  sm: T // Fix the type declaration
-  lg: T
-}
+  sm: T; // Fix the type declaration
+  lg: T;
+};
 
-export type ManifestTypographySection = Record<string, FigmaTypography>
+export type ManifestTypographySection = Record<string, FigmaTypography>;
 export type FlattenedManidestTypographySection = Record<
   string,
   TypeScreenSizes<ManifestTextStyle>
->
+>;
 
 export type FontFamilyKey =
-  | 'Primary'
-  | 'Secondary'
-  | 'Tertiary'
-  | 'Quaternary'
-  | 'Quinary'
-export type FontFamilyMapping = Record<string, FontFamilyKey>
-export type ExtendedConfig = Omit<Config, 'content' | 'prefix'>
+  | "Primary"
+  | "Secondary"
+  | "Tertiary"
+  | "Quaternary"
+  | "Quinary";
+export type FontFamilyMapping = Record<string, FontFamilyKey>;
+export type FontWeightMapping = Partial<
+  Record<FontFamilyKey, Record<string, number>>
+>;
+export type ExtendedConfig = Omit<Config, "content" | "prefix">;

No alert changes

Improved metrics

Total package byte prevSize

35850

increased by7.53%

Lines of code

1140

increased by8.99%

No dependency changes