feat(preset-mini): support fontWeight theme config (#2860)

Co-authored-by: Chris <1633711653@qq.com>
unocss · Jul 12, 2023 · ffdeb20 · ffdeb20
1 parent d493c1b
commit ffdeb20
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 16 deletions.
diff --git a/packages/preset-mini/src/_rules/typography.ts b/packages/preset-mini/src/_rules/typography.ts
@@ -3,19 +3,6 @@ import { toArray } from '@unocss/core'
 import type { Theme } from '../theme'
 import { colorResolver, colorableShadows, h, splitShorthand } from '../utils'
 
-const weightMap: Record<string, string> = {
-  thin: '100',
-  extralight: '200',
-  light: '300',
-  normal: '400',
-  medium: '500',
-  semibold: '600',
-  bold: '700',
-  extrabold: '800',
-  black: '900',
-  // int[0, 900] -> int
-}
-
 function handleLineHeight(s: string, theme: Theme) {
   return theme.lineHeight?.[s] || h.bracket.cssvar.global.rem(s)
 }
@@ -59,8 +46,13 @@ export const fonts: Rule<Theme>[] = [
   // weights
   [
     /^(?:font|fw)-?([^-]+)$/,
-    ([, s]) => ({ 'font-weight': weightMap[s] || h.bracket.global.number(s) }),
-    { autocomplete: `(font|fw)-(100|200|300|400|500|600|700|800|900|${Object.keys(weightMap).join('|')})` },
+    ([, s], { theme }) => ({ 'font-weight': theme.fontWeight?.[s] || h.bracket.global.number(s) }),
+    {
+      autocomplete: [
+        '(font|fw)-(100|200|300|400|500|600|700|800|900)',
+        '(font|fw)-$fontWeight',
+      ],
+    },
   ],
 
   // leadings

diff --git a/packages/preset-mini/src/_theme/default.ts b/packages/preset-mini/src/_theme/default.ts
@@ -1,5 +1,5 @@
 import { colors } from './colors'
-import { fontFamily, fontSize, letterSpacing, lineHeight, textIndent, textShadow, textStrokeWidth, wordSpacing } from './font'
+import { fontFamily, fontSize, fontWeight, letterSpacing, lineHeight, textIndent, textShadow, textStrokeWidth, wordSpacing } from './font'
 import { borderRadius, boxShadow, breakpoints, duration, easing, lineWidth, ringWidth, spacing, verticalBreakpoints } from './misc'
 import { blur, dropShadow } from './filters'
 import { containers, height, maxHeight, maxWidth, width } from './size'
@@ -22,6 +22,7 @@ export const theme = {
   colors,
   fontFamily,
   fontSize,
+  fontWeight,
   breakpoints,
   verticalBreakpoints,
   borderRadius,

diff --git a/packages/preset-mini/src/_theme/font.ts b/packages/preset-mini/src/_theme/font.ts
@@ -99,4 +99,17 @@ export const letterSpacing = {
   widest: '0.1em',
 } satisfies Theme['letterSpacing']
 
+export const fontWeight = {
+  thin: '100',
+  extralight: '200',
+  light: '300',
+  normal: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+  extrabold: '800',
+  black: '900',
+  // int[0, 900] -> int
+} satisfies Theme['fontWeight']
+
 export const wordSpacing = letterSpacing satisfies Theme['letterSpacing']
diff --git a/packages/preset-mini/src/_theme/types.ts b/packages/preset-mini/src/_theme/types.ts
@@ -31,6 +31,7 @@ export interface Theme {
   colors?: Colors
   fontFamily?: Record<string, string>
   fontSize?: Record<string, string | [string, string]>
+  fontWeight?: Record<string, string>
   lineHeight?: Record<string, string>
   letterSpacing?: Record<string, string>
   wordSpacing?: Record<string, string>

diff --git a/test/assets/output/preset-mini-font-weight-theme.css b/test/assets/output/preset-mini-font-weight-theme.css
@@ -0,0 +1,3 @@
+/* layer: default */
+.font-foot{font-weight:100;}
+.font-head{font-weight:900;}
diff --git a/test/preset-mini.test.ts b/test/preset-mini.test.ts
@@ -175,6 +175,29 @@ describe('preset-mini', () => {
     await expect(css).toMatchFileSnapshot('./assets/output/preset-mini-font-size-theme.css')
   })
 
+  test('fontWeight theme', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetMini(),
+      ],
+      theme: {
+        fontWeight: {
+          head: '900',
+          foot: '100',
+        },
+      },
+    })
+
+    const { css } = await uno.generate([
+      'font-head',
+      'font-foot',
+    ].join(' '), { preflights: false })
+
+    // @ts-expect-error types
+    expect(uno.config.theme.fontWeight.head).toEqual('900')
+    await expect(css).toMatchFileSnapshot('./assets/output/preset-mini-font-weight-theme.css')
+  })
+
   test('dark class', async () => {
     const uno = createGenerator({
       presets: [