@unocss/preset-web-fonts 0.21.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Anthony Fu <https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+# @unocss/preset-web-fonts
+
+Web fonts support for [UnoCSS](https://github.com/antfu/unocss).
+
+## Install
+
+```bash
+npm i -D @unocss/preset-web-fonts
+```
+
+```ts
+import presetWebFonts from '@unocss/preset-web-fonts'
+import presetUno from '@unocss/preset-uno'
+
+Unocss({
+  presets: [
+    presetUno(),
+    presetWebFonts({
+      provider: 'google', // default provider
+      fonts: {
+        // these will extend the default theme
+        sans: 'Roboto',
+        mono: ['Fira Code', 'Fira Mono:400,700'],
+        // custom ones
+        lobster: 'Lobster',
+        lato: [
+          {
+            name: 'Lato',
+            weights: ['400', '700'],
+            italic: true
+          },
+          {
+            name: 'sans-serif',
+            provider: 'none'
+          }
+        ]
+      },
+    })
+  ]
+})
+```
+
+The following CSS will be generated
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Fira+Code&family=Fira+Mono:wght@400;700&family=Lobster&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+/* layer: default */
+.font-lato {
+  font-family: "Lato", sans-serif;
+}
+.font-lobster {
+  font-family: "Lobster";
+}
+.font-mono {
+  font-family: "Fira Code", "Fira Mono", ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+.font-sans {
+  font-family: "Roboto", ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+}
+```
+
+## Providers
+
+Currently supported Providers:
+
+- `none` - do nothing, treat the font as system font
+- `google` - [Google Fonts](https://fonts.google.com/)
+
+PR welcome to add more providers 🙌
+
+## Configuration
+
+Refer to the [type definition](https://github.com/antfu/unocss/blob/main/packages/preset-web-fonts/src/types.ts#L4) for all configurations avaliable.
+
+## License
+
+MIT License © 2022-PRESENT [Anthony Fu](https://github.com/antfu)

package/dist/index.cjs

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const core = require('@unocss/core');
+
+const GoogleFontsProvider = {
+  name: "google",
+  getPreflight(fonts) {
+    const strings = fonts.filter((i) => i.provider === "google").map((i) => {
+      let name = i.name.replace(/\s+/g, "+");
+      if (i.weights?.length) {
+        name += i.italic ? `:ital,wght@${i.weights.flatMap((i2) => [`0,${i2}`, `1,${i2}`]).sort().join(";")}` : `:wght@${i.weights.sort().join(";")}`;
+      }
+      return `family=${name}`;
+    }).join("&");
+    return `@import url('https://fonts.googleapis.com/css2?${strings}&display=swap');`;
+  },
+  getFontName(font) {
+    return `"${font.name}"`;
+  }
+};
+
+const NoneProvider = {
+  name: "none",
+  getPreflight() {
+    return "";
+  },
+  getFontName(font) {
+    return font.name;
+  }
+};
+
+function normalizedFontMeta(meta, defaultProvider) {
+  if (typeof meta !== "string") {
+    meta.provider = meta.provider ?? defaultProvider;
+    return meta;
+  }
+  const [name, weights = ""] = meta.split(":");
+  return {
+    name,
+    weights: weights.split(/[,;]\s*/).filter(Boolean),
+    provider: defaultProvider
+  };
+}
+const providers = {
+  google: GoogleFontsProvider,
+  none: NoneProvider
+};
+const preset = (options = {}) => {
+  const {
+    provider: defaultProvider = "google",
+    extendTheme = true,
+    themeKey = "fontFamily"
+  } = options;
+  const fontObject = Object.fromEntries(Object.entries(options.fonts || {}).map(([name, meta]) => [name, core.toArray(meta).map((m) => normalizedFontMeta(m, defaultProvider))]));
+  const fonts = Object.values(fontObject).flatMap((i) => i);
+  const preset2 = {
+    name: "@unocss/preset-web-fonts",
+    preflights: [
+      {
+        getCSS() {
+          const names = new Set(fonts.map((i) => i.provider || defaultProvider));
+          const preflights = [];
+          for (const name of names) {
+            const provider = providers[name];
+            preflights.push(provider.getPreflight(fonts.filter((i) => i.provider === name)));
+          }
+          return preflights.filter(Boolean).join("\n");
+        },
+        layer: "_webfonts"
+      }
+    ]
+  };
+  if (extendTheme) {
+    preset2.extendTheme = (theme) => {
+      if (!theme[themeKey])
+        theme[themeKey] = {};
+      const obj = Object.fromEntries(Object.entries(fontObject).map(([name, fonts2]) => [name, fonts2.map((f) => providers[f.provider || defaultProvider].getFontName(f))]));
+      for (const key of Object.keys(obj)) {
+        if (typeof theme[themeKey][key] === "string")
+          theme[themeKey][key] = obj[key].map((i) => `${i},`).join("") + theme[themeKey][key];
+        else
+          theme[themeKey][key] = obj[key].join(",");
+      }
+    };
+  }
+  return preset2;
+};
+
+exports["default"] = preset;
+exports.normalizedFontMeta = normalizedFontMeta;

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import { Preset } from '@unocss/core';
+
+declare type WebFontsProviders = 'google' | 'none';
+interface WebFontMeta {
+    name: string;
+    weights?: (string | number)[];
+    italic?: boolean;
+    /**
+     * Override the provider
+     * @default <matches root config>
+     */
+    provider?: WebFontsProviders;
+}
+interface WebFontsOptions {
+    /**
+     * Provider service of the web fonts
+     * @default 'google'
+     */
+    provider?: WebFontsProviders;
+    /**
+     * The fonts
+     */
+    fonts?: Record<string, WebFontMeta | string | (WebFontMeta | string)[]>;
+    /**
+     * Extend the theme object
+     * @default true
+     */
+    extendTheme?: boolean;
+    /**
+     * Key for the theme object
+     *
+     * @default 'fontFamily'
+     */
+    themeKey?: string;
+}
+interface Provider {
+    name: WebFontsProviders;
+    getPreflight(fonts: WebFontMeta[]): string;
+    getFontName(font: WebFontMeta): string;
+}
+
+declare function normalizedFontMeta(meta: WebFontMeta | string, defaultProvider: WebFontsProviders): WebFontMeta;
+declare const preset: (options?: WebFontsOptions) => Preset<any>;
+
+export { Provider, WebFontMeta, WebFontsOptions, WebFontsProviders, preset as default, normalizedFontMeta };

package/dist/index.mjs

@@ -0,0 +1,87 @@
+import { toArray } from '@unocss/core';
+
+const GoogleFontsProvider = {
+  name: "google",
+  getPreflight(fonts) {
+    const strings = fonts.filter((i) => i.provider === "google").map((i) => {
+      let name = i.name.replace(/\s+/g, "+");
+      if (i.weights?.length) {
+        name += i.italic ? `:ital,wght@${i.weights.flatMap((i2) => [`0,${i2}`, `1,${i2}`]).sort().join(";")}` : `:wght@${i.weights.sort().join(";")}`;
+      }
+      return `family=${name}`;
+    }).join("&");
+    return `@import url('https://fonts.googleapis.com/css2?${strings}&display=swap');`;
+  },
+  getFontName(font) {
+    return `"${font.name}"`;
+  }
+};
+
+const NoneProvider = {
+  name: "none",
+  getPreflight() {
+    return "";
+  },
+  getFontName(font) {
+    return font.name;
+  }
+};
+
+function normalizedFontMeta(meta, defaultProvider) {
+  if (typeof meta !== "string") {
+    meta.provider = meta.provider ?? defaultProvider;
+    return meta;
+  }
+  const [name, weights = ""] = meta.split(":");
+  return {
+    name,
+    weights: weights.split(/[,;]\s*/).filter(Boolean),
+    provider: defaultProvider
+  };
+}
+const providers = {
+  google: GoogleFontsProvider,
+  none: NoneProvider
+};
+const preset = (options = {}) => {
+  const {
+    provider: defaultProvider = "google",
+    extendTheme = true,
+    themeKey = "fontFamily"
+  } = options;
+  const fontObject = Object.fromEntries(Object.entries(options.fonts || {}).map(([name, meta]) => [name, toArray(meta).map((m) => normalizedFontMeta(m, defaultProvider))]));
+  const fonts = Object.values(fontObject).flatMap((i) => i);
+  const preset2 = {
+    name: "@unocss/preset-web-fonts",
+    preflights: [
+      {
+        getCSS() {
+          const names = new Set(fonts.map((i) => i.provider || defaultProvider));
+          const preflights = [];
+          for (const name of names) {
+            const provider = providers[name];
+            preflights.push(provider.getPreflight(fonts.filter((i) => i.provider === name)));
+          }
+          return preflights.filter(Boolean).join("\n");
+        },
+        layer: "_webfonts"
+      }
+    ]
+  };
+  if (extendTheme) {
+    preset2.extendTheme = (theme) => {
+      if (!theme[themeKey])
+        theme[themeKey] = {};
+      const obj = Object.fromEntries(Object.entries(fontObject).map(([name, fonts2]) => [name, fonts2.map((f) => providers[f.provider || defaultProvider].getFontName(f))]));
+      for (const key of Object.keys(obj)) {
+        if (typeof theme[themeKey][key] === "string")
+          theme[themeKey][key] = obj[key].map((i) => `${i},`).join("") + theme[themeKey][key];
+        else
+          theme[themeKey][key] = obj[key].join(",");
+      }
+    };
+  }
+  return preset2;
+};
+
+export { preset as default, normalizedFontMeta };

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@unocss/preset-web-fonts",
+  "version": "0.21.1",
+  "description": "Web Fonts support for Uno CSS",
+  "keywords": [
+    "unocss",
+    "unocss-preset",
+    "fonts",
+    "web-fonts",
+    "google-fonts"
+  ],
+  "homepage": "https://github.com/antfu/unocss/tree/main/packages/preset-web-fonts#readme",
+  "bugs": {
+    "url": "https://github.com/antfu/unocss/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/antfu/unocss.git",
+    "directory": "packages/preset-web-fonts"
+  },
+  "funding": "https://github.com/sponsors/antfu",
+  "license": "MIT",
+  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./fs": {
+      "require": "./dist/fs.cjs",
+      "import": "./dist/fs.mjs",
+      "types": "./dist/fs.d.ts"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "*.css"
+  ],
+  "dependencies": {
+    "@unocss/core": "0.21.1"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "stub": "unbuild --stub"
+  }
+}