Remove text prefix for tailwind built-in utilities only

axa-ch · Oct 10, 2024 · 88b7533 · 88b7533
1 parent 1d6b420
commit 88b7533
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/formats/tailwind/get-font-size.js b/formats/tailwind/get-font-size.js
@@ -9,14 +9,17 @@ module.exports.getFontSize = (dictionary) => {
   const secondaryFontSizes = getSecondaryFontSizesTokens(dictionary);
   const textFontSizes = getTextFontSizesTokens(dictionary);
 
-  return [...primaryFontSizes, ...secondaryFontSizes, ...textFontSizes].reduce(
-    (acc, token) => ({
-      ...acc,
-      [token.name.replace('typography-', '').replace('text-', '')]: [
-        token.value.fontSize,
-        { lineHeight: token.value.lineHeight, fontWeight: token.value.fontWeight },
-      ],
-    }),
-    {},
-  );
+  return [...primaryFontSizes, ...secondaryFontSizes, ...textFontSizes].reduce((acc, token) => {
+    let tokenKey = token.name.replace('typography-', '');
+
+    // Only remove the `text-` prefix for Tailwind built-ins
+    // Note: In the future, we should consider replacing `text-` prefixes for other tokens as well to avoid redundancy.
+    if (['text-sm', 'text-base', 'text-lg', 'text-xl'].some((utility) => token.name.includes(utility))) {
+      tokenKey = tokenKey.replace('text-', '');
+    }
+
+    acc[tokenKey] = [token.value.fontSize, { lineHeight: token.value.lineHeight, fontWeight: token.value.fontWeight }];
+
+    return acc;
+  }, {});
 };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@axa-ch/design-tokens",
-  "version": "2.2.0",
+  "version": "2.1.2",
   "description": "AXA Design Tokens",
   "main": "./tokens.js",
   "module": "./tokens.mjs",

diff --git a/tests/tailwind.spec.ts b/tests/tailwind.spec.ts
@@ -52,16 +52,16 @@ describe('Tailwind Config specs', () => {
   });
 
   it('Font-size aliases are properly generated for text-* utilities', () => {
-    expect(tailwindConfig.theme.fontSize.sm).toEqual(tailwindConfig.theme.fontSize['4']);
-    expect(tailwindConfig.theme.fontSize.base).toEqual(tailwindConfig.theme.fontSize['3']);
-    expect(tailwindConfig.theme.fontSize.lg).toEqual(tailwindConfig.theme.fontSize['2']);
-    expect(tailwindConfig.theme.fontSize.xl).toEqual(tailwindConfig.theme.fontSize['1']);
+    expect(tailwindConfig.theme.fontSize.sm).toEqual(tailwindConfig.theme.fontSize['text-4']);
+    expect(tailwindConfig.theme.fontSize.base).toEqual(tailwindConfig.theme.fontSize['text-3']);
+    expect(tailwindConfig.theme.fontSize.lg).toEqual(tailwindConfig.theme.fontSize['text-2']);
+    expect(tailwindConfig.theme.fontSize.xl).toEqual(tailwindConfig.theme.fontSize['text-1']);
   });
 
   it('Font-size <number> utilities are still available for backward compatibility', () => {
-    expect(tailwindConfig.theme.fontSize['1'][0]).toMatch(/rem$/);
-    expect(tailwindConfig.theme.fontSize['2'][0]).toMatch(/rem$/);
-    expect(tailwindConfig.theme.fontSize['3'][0]).toMatch(/rem$/);
-    expect(tailwindConfig.theme.fontSize['4'][0]).toMatch(/rem$/);
+    expect(tailwindConfig.theme.fontSize['text-1'][0]).toMatch(/rem$/);
+    expect(tailwindConfig.theme.fontSize['text-2'][0]).toMatch(/rem$/);
+    expect(tailwindConfig.theme.fontSize['text-3'][0]).toMatch(/rem$/);
+    expect(tailwindConfig.theme.fontSize['text-4'][0]).toMatch(/rem$/);
   });
 });