fix(preset-web-fonts): fix wrong weight sort (#2729)

unocss · Jun 6, 2023 · 10724f3 · 10724f3
1 parent 1bacd8f
commit 10724f3
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 3 deletions.
diff --git a/packages/preset-web-fonts/src/index.ts b/packages/preset-web-fonts/src/index.ts
@@ -26,14 +26,16 @@ export { createGoogleCompatibleProvider as createGoogleProvider } from './provid
 export function normalizedFontMeta(meta: WebFontMeta | string, defaultProvider: WebFontsProviders): ResolvedWebFontMeta {
   if (typeof meta !== 'string') {
     meta.provider = resolveProvider(meta.provider || defaultProvider)
+    if (meta.weights)
+      meta.weights = [...new Set(meta.weights.map(Number).sort((a, b) => a - b))]
     return meta as ResolvedWebFontMeta
   }
 
   const [name, weights = ''] = meta.split(':')
 
   return {
     name,
-    weights: weights.split(/[,;]\s*/).filter(Boolean),
+    weights: [...new Set(weights.split(/[,;]\s*/).filter(Boolean).map(Number).sort((a, b) => a - b))],
     provider: resolveProvider(defaultProvider),
   }
 }

diff --git a/packages/preset-web-fonts/src/providers/google.ts b/packages/preset-web-fonts/src/providers/google.ts
@@ -4,13 +4,19 @@ export function createGoogleCompatibleProvider(name: WebFontsProviders, host: st
   return {
     name,
     getImportUrl(fonts) {
+      const sort = (weights: string[][]) => {
+        const firstW = weights.map(w => w[0])
+        const lastW = weights.map(w => w[1])
+        return `${firstW.join(';')};${lastW.join(';')}`
+      }
+
       const strings = fonts
         .map((i) => {
           let name = i.name.replace(/\s+/g, '+')
           if (i.weights?.length) {
             name += i.italic
-              ? `:ital,wght@${i.weights.flatMap(i => [`0,${i}`, `1,${i}`]).sort().join(';')}`
-              : `:wght@${i.weights.sort().join(';')}`
+              ? `:ital,wght@${sort(i.weights.map(w => [`0,${w}`, `1,${w}`]))}`
+              : `:wght@${i.weights.join(';')}`
           }
           return `family=${name}`
         }).join('&')

diff --git a/test/preset-web-fonts.test.ts b/test/preset-web-fonts.test.ts
@@ -61,3 +61,55 @@ test('web-fonts (inline: true)', async () => {
   const { css } = await uno.generate(classes)
   expect(css).toContain('@font-face')
 })
+
+test('web-fonts weigth sort', async () => {
+  const uno = createGenerator({
+    presets: [
+      presetMini(),
+      presetWebFonts({
+        provider: 'google',
+        fonts: {
+          mono: 'Fira Mono:1000,200',
+          lato: [
+            {
+              name: 'Lato',
+              weights: ['1000', '200'],
+              italic: true,
+            },
+          ],
+        },
+        inlineImports: false,
+      }),
+    ],
+  })
+
+  const { css } = await uno.generate(classes)
+  const importUrl = css.match(/@import url\('(.*)'\)/)![1]
+  expect(importUrl).toMatchInlineSnapshot('"https://fonts.googleapis.com/css2?family=Fira+Mono:wght@200;1000&family=Lato:ital,wght@0,200;0,1000;1,200;1,1000&display=swap"')
+})
+
+test('web-fonts weigth deduplicate', async () => {
+  const uno = createGenerator({
+    presets: [
+      presetMini(),
+      presetWebFonts({
+        provider: 'google',
+        fonts: {
+          mono: 'Fira Mono:200,1000,1000',
+          lato: [
+            {
+              name: 'Lato',
+              weights: ['1000', '200', '1000', '400'],
+              italic: true,
+            },
+          ],
+        },
+        inlineImports: false,
+      }),
+    ],
+  })
+
+  const { css } = await uno.generate(classes)
+  const importUrl = css.match(/@import url\('(.*)'\)/)![1]
+  expect(importUrl).toMatchInlineSnapshot('"https://fonts.googleapis.com/css2?family=Fira+Mono:wght@200;1000&family=Lato:ital,wght@0,200;0,400;0,1000;1,200;1,400;1,1000&display=swap"')
+})