wip

TODO.md

@@ -0,0 +1,14 @@
+## Providers
+- [ ] google
+- [ ] bunny
+- [ ] fontshare
+- [ ] font-source?
+- [ ] custom
+- [ ] (public)
+
+## Features
+
+- zero-configuration required
+- automatic font metric optimisation powered by https://github.com/unjs/fontaine
+- built-in providers (`google`, `bunny`, `local` and more)
+- custom providers for full control

build.config.ts

@@ -0,0 +1,4 @@
+import { defineBuildConfig } from 'unbuild'
+export default defineBuildConfig({
+  externals: ['css-tree', '#types']
+})

package.json

@@ -21,7 +21,7 @@
     "prepack": "nuxt-module-build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
     "test": "vitest run",
@@ -30,18 +30,27 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.10.2",
-    "fontaine": "^0.4.1"
+    "csstree": "^0.0.3",
+    "defu": "^6.1.4",
+    "fontaine": "^0.4.1",
+    "globby": "^14.0.1",
+    "magic-string": "^0.30.7",
+    "pathe": "^1.1.2",
+    "ufo": "^1.4.0",
+    "unplugin": "^1.7.1"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/module-builder": "^0.5.5",
     "@nuxt/schema": "^3.10.2",
     "@nuxt/test-utils": "^3.11.0",
+    "@types/css-tree": "^2.3.6",
     "@vitest/coverage-v8": "^1.3.0",
     "changelogen": "^0.5.5",
     "eslint": "^8.56.0",
     "typescript": "^5.3.3",
+    "unbuild": "^2.0.0",
     "vitest": "^1.3.0",
     "vue-tsc": "^1.8.27"
   },

playground/app.vue

@@ -3,3 +3,12 @@
     Nuxt module playground!
   </div>
 </template>
+
+<style scoped>
+@import '~/assets/test.css';
+
+div {
+  color: red;
+  font-family: 'Roboto', Courier, monospace;
+}
+</style>

playground/assets/test.css

@@ -0,0 +1,3 @@
+:root {
+  font-family: 'Roboto', sans-serif;
+}

playground/nuxt.config.ts

@@ -1,5 +1,29 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ['@nuxt/fonts'],
-  fonts: {},
+  modules: [
+    '@nuxt/fonts',
+    // '@nuxtjs/tailwindcss'
+  ],
+  fonts: {
+    providers: {
+      google: false
+    }
+    // provider: 'google', // sets default provider
+    // families: [
+    //   {
+    //     name: 'Roboto', // the 'canonical' name of the font used to look it up in a provider database
+    //     as: 'custom-roboto-family', // allow registering a font family with a different name
+    //     provider: 'local', // you can override the provider on a per-family basis
+    //     // provider specific options can be provided
+    //     src: '~/public/roboto.woff2', // you can specify a source within your project
+    //     // specific configuration will be used to generate `@font-face` definitions
+    //     subsets: ['latin', 'greek'],
+    //     display: 'swap', // or 'block'7
+    //     weight: ['400', '700'],
+    //     style: ['normal', 'italic'],
+    //     // and produce CSS overrides to reduce layout shift (using fontaine)
+    //     fallbacks: ['Arial'],
+    //   }
+    // ]
+  }
 })

playground/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@nuxt/fonts": "latest",
+    "@nuxtjs/tailwindcss": "latest",
     "nuxt": "latest",
     "vue": "latest"
   }