feat(preset-mini): support fontSize with letter-space (#3149)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

Author: zyyv

package.json

@@ -109,6 +109,7 @@
     "semver": "^7.5.4",
     "simple-git-hooks": "^2.9.0",
     "splitpanes": "^3.1.5",
+    "std-env": "^3.4.3",
     "taze": "^0.11.4",
     "terser": "^5.22.0",
     "tsup": "^7.2.0",

packages/preset-mini/build.config.ts

@@ -1,4 +1,5 @@
 import { defineBuildConfig } from 'unbuild'
+import { isWindows } from 'std-env'
 
 export default defineBuildConfig({
   entries: [
@@ -13,5 +14,9 @@ export default defineBuildConfig({
   declaration: true,
   rollup: {
     emitCJS: true,
+    dts: {
+      respectExternal: false,
+    },
   },
+  failOnWarn: !isWindows,
 })

packages/preset-mini/src/_rules/typography.ts

@@ -1,10 +1,10 @@
-import type { Rule } from '@unocss/core'
+import type { CSSObject, Rule } from '@unocss/core'
 import { toArray } from '@unocss/core'
 import type { Theme } from '../theme'
 import { colorResolver, colorableShadows, h, splitShorthand } from '../utils'
 
-function handleLineHeight(s: string, theme: Theme) {
-  return theme.lineHeight?.[s] || h.bracket.cssvar.global.rem(s)
+function handleThemeByKey(s: string, theme: Theme, key: 'lineHeight' | 'letterSpacing') {
+  return theme[key]?.[s] || h.bracket.cssvar.global.rem(s)
 }
 
 export const fonts: Rule<Theme>[] = [
@@ -13,14 +13,21 @@ export const fonts: Rule<Theme>[] = [
     /^text-(.+)$/,
     ([, s = 'base'], { theme }) => {
       const [size, leading] = splitShorthand(s, 'length')
-      const sizePairs = toArray(theme.fontSize?.[size])
-      const lineHeight = leading ? handleLineHeight(leading, theme) : undefined
+      const sizePairs = toArray(theme.fontSize?.[size]) as [string, string | CSSObject, string?]
+      const lineHeight = leading ? handleThemeByKey(leading, theme, 'lineHeight') : undefined
 
       if (sizePairs?.[0]) {
-        const [fontSize, height] = sizePairs
+        const [fontSize, height, letterSpacing] = sizePairs
+        if (typeof height === 'object') {
+          return {
+            'font-size': fontSize,
+            ...height,
+          }
+        }
         return {
           'font-size': fontSize,
           'line-height': lineHeight ?? height ?? '1',
+          'letter-spacing': letterSpacing ? handleThemeByKey(letterSpacing, theme, 'letterSpacing') : undefined,
         }
       }
 
@@ -37,7 +44,7 @@ export const fonts: Rule<Theme>[] = [
     { autocomplete: 'text-$fontSize' },
   ],
   [/^(?:text|font)-size-(.+)$/, ([, s], { theme }) => {
-    const themed = toArray(theme.fontSize?.[s])
+    const themed = toArray(theme.fontSize?.[s]) as [string, string | CSSObject]
     const size = themed?.[0] ?? h.bracket.cssvar.global.rem(s)
     if (size != null)
       return { 'font-size': size }
@@ -58,7 +65,7 @@ export const fonts: Rule<Theme>[] = [
   // leadings
   [
     /^(?:font-)?(?:leading|lh|line-height)-(.+)$/,
-    ([, s], { theme }) => ({ 'line-height': handleLineHeight(s, theme) }),
+    ([, s], { theme }) => ({ 'line-height': handleThemeByKey(s, theme, 'lineHeight') }),
     { autocomplete: '(leading|lh|line-height)-$lineHeight' },
   ],
 

packages/preset-mini/src/_theme/font.ts

@@ -51,7 +51,7 @@ export const fontSize: Theme['fontSize'] = {
   '7xl': ['4.5rem', '1'],
   '8xl': ['6rem', '1'],
   '9xl': ['8rem', '1'],
-}satisfies Theme['fontSize']
+} satisfies Theme['fontSize']
 
 export const textIndent: Theme['textIndent'] = {
   'DEFAULT': '1.5rem',

packages/preset-mini/src/_theme/types.ts

@@ -1,4 +1,4 @@
-import type { Arrayable } from '@unocss/core'
+import type { Arrayable, CSSObject } from '@unocss/core'
 
 export interface ThemeAnimation {
   keyframes?: Record<string, string>
@@ -30,7 +30,7 @@ export interface Theme {
   verticalBreakpoints?: Record<string, string>
   colors?: Colors
   fontFamily?: Record<string, string>
-  fontSize?: Record<string, string | [string, string]>
+  fontSize?: Record<string, string | [string, string | CSSObject] | [string, string, string]>
   fontWeight?: Record<string, string>
   lineHeight?: Record<string, string>
   letterSpacing?: Record<string, string>

pnpm-lock.yaml

@@ -325,4 +325,32 @@ describe('preset-mini', () => {
         .z-header{z-index:500;}"
       `)
   })
+
+  it('theme font-size with letter-space', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetMini(),
+      ],
+      theme: {
+        fontSize: {
+          normal: '24px',
+          ls: ['8rem', '1', '2.25rem'],
+          obj: ['8rem', {
+            'line-height': '2.25rem',
+            'letter-spacing': '-0.02em',
+            'font-weight': '700',
+          }],
+        },
+      },
+    })
+
+    expect((await uno.generate('text-sm text-normal text-ls text-obj', { preflights: false })).css)
+      .toMatchInlineSnapshot(`
+        "/* layer: default */
+        .text-ls{font-size:8rem;line-height:1;letter-spacing:2.25rem;}
+        .text-normal{font-size:24px;line-height:1;}
+        .text-obj{font-size:8rem;line-height:2.25rem;letter-spacing:-0.02em;font-weight:700;}
+        .text-sm{font-size:0.875rem;line-height:1.25rem;}"
+      `)
+  })
 })