feat(preset-mini): support font-stretch rules (#3565)

Co-authored-by: Anthony Fu <github@antfu.me>
unocss · Mar 14, 2024 · ad1bd4b · ad1bd4b
1 parent 2ac413e
commit ad1bd4b
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 1 deletion.
diff --git a/packages/preset-mini/src/_rules/typography.ts b/packages/preset-mini/src/_rules/typography.ts
@@ -62,6 +62,22 @@ export const fonts: Rule<Theme>[] = [
     { autocomplete: 'word-spacing-$wordSpacing' },
   ],
 
+  // stretch
+  ['font-stretch-normal', { 'font-stretch': 'normal' }],
+  ['font-stretch-ultra-condensed', { 'font-stretch': 'ultra-condensed' }],
+  ['font-stretch-extra-condensed', { 'font-stretch': 'extra-condensed' }],
+  ['font-stretch-condensed', { 'font-stretch': 'condensed' }],
+  ['font-stretch-semi-condensed', { 'font-stretch': 'semi-condensed' }],
+  ['font-stretch-semi-expanded', { 'font-stretch': 'semi-expanded' }],
+  ['font-stretch-expanded', { 'font-stretch': 'expanded' }],
+  ['font-stretch-extra-expanded', { 'font-stretch': 'extra-expanded' }],
+  ['font-stretch-ultra-expanded', { 'font-stretch': 'ultra-expanded' }],
+  [
+    /^font-stretch-(.+)$/,
+    ([, s]) => ({ 'font-stretch': h.bracket.cssvar.fraction.global(s) }),
+    { autocomplete: 'font-stretch-<percentage>' },
+  ],
+
   // family
   [
     /^font-(.+)$/,

diff --git a/playground/src/auto-imports.d.ts b/playground/src/auto-imports.d.ts
@@ -345,6 +345,7 @@ declare global {
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
+  interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly STORAGE_KEY: UnwrapRef<typeof import('./composables/constants')['STORAGE_KEY']>
@@ -679,6 +680,7 @@ declare module 'vue' {
   }
 }
 declare module '@vue/runtime-core' {
+  interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly STORAGE_KEY: UnwrapRef<typeof import('./composables/constants')['STORAGE_KEY']>

diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css
@@ -494,6 +494,9 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .word-spacing-2{word-spacing:0.5rem;}
 .word-spacing-inherit{word-spacing:inherit;}
 .word-spacing-wide{word-spacing:0.025em;}
+.font-stretch-normal{font-stretch:normal;}
+.font-stretch-\[ultra-expanded\]{font-stretch:ultra-expanded;}
+.font-stretch-1\/2{font-stretch:50%;}
 .font-\[\"custom_fontFamily_name\"\]{font-family:"custom fontFamily name";}
 .font-\[system-ui\]{font-family:system-ui;}
 .font-\$font-name{font-family:var(--font-name);}

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -879,6 +879,9 @@ export const presetMiniTargets: string[] = [
   'tracking-[2/5]',
   'tracking-inherit',
   'font-tracking-1em',
+  'font-stretch-normal',
+  'font-stretch-[ultra-expanded]',
+  'font-stretch-1/2',
   'word-spacing-1',
   'word-spacing-wide',
   'word-spacing-2',

diff --git a/test/autocomplete.test.ts b/test/autocomplete.test.ts
@@ -70,7 +70,6 @@ describe('autocomplete', () => {
         'filter-',
         'fle',
         'font-',
-        'font-',
         'grow-',
         'keyframes-',
         'leading-',