feat: support font-weight in font-size utilities

tw-in-js · Oct 3, 2022 · d22ddb9 · d22ddb9
1 parent eb01603
commit d22ddb9
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/.changeset/tough-geckos-matter.md b/.changeset/tough-geckos-matter.md
@@ -0,0 +1,5 @@
+---
+'@twind/tailwind': patch
+---
+
+support font-weight in font-size utilities
diff --git a/packages/preset-tailwind/src/rules.test.ts b/packages/preset-tailwind/src/rules.test.ts
@@ -342,3 +342,26 @@ test('arbitrary variants with @apply', () => {
     '@media screen{@media(hover:hover){.css\\#itthsz:hover{text-decoration-line:underline}}}',
   ])
 })
+
+test('font-size utilities can include a font-weight', () => {
+  const tw = twind(
+    {
+      presets: [tailwind({ disablePreflight: true })],
+      theme: {
+        fontSize: {
+          sm: '12px',
+          md: ['16px', { lineHeight: '24px', fontWeight: 500 }],
+          lg: ['20px', { lineHeight: '28px', fontWeight: 'bold' }],
+        },
+      },
+    },
+    virtual(),
+  )
+
+  assert.strictEqual(tw('text-sm text-md text-lg'), 'text-lg text-md text-sm')
+  assert.deepEqual(tw.target, [
+    '.text-lg{font-size:20px;line-height:28px;font-weight:bold}',
+    '.text-md{font-size:16px;line-height:24px;font-weight:500}',
+    '.text-sm{font-size:12px}',
+  ])
+})
diff --git a/packages/preset-tailwind/src/types.ts b/packages/preset-tailwind/src/types.ts
@@ -68,7 +68,7 @@ declare module 'twind' {
 export type FontSizeValue =
   | string
   | [size: string, lineHeight: string]
-  | [size: string, options: { lineHeight?: string; letterSpacing?: string }]
+  | [size: string, options: { lineHeight?: string; letterSpacing?: string; fontWeight?: string }]
 
 export interface Container {
   screens?: BaseTheme['screens']