Skip to content

Commit e62f9c7

Browse files
stafyniaksachastafyniaksacha
committed
feat: add fontsource provider
1 parent 5ae235a commit e62f9c7

File tree

9 files changed

+119
-7
lines changed

9 files changed

+119
-7
lines changed

‎examples/vite/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
<body>
99
<h1>Hello Vite!</h1>
1010
<h2>I'm using a local font !</h2>
11+
<div class="fontsource-abeezee">I'm a ABeeZee fontsource</div>
12+
<div class="fontsource-truculenta">I'm a Truculenta fontsource</div>
1113
<a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
1214
<script type="module" src="/main.ts"></script>
1315
</body>

‎examples/vite/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
},
99
"devDependencies": {
1010
"vite": "^4.2.0",
11-
"unplugin-fonts": "workspace:*"
11+
"unplugin-fonts": "workspace:*",
12+
"@fontsource/abeezee": "^4.5.10",
13+
"@fontsource/truculenta": "^4.5.12"
1214
}
1315
}

‎examples/vite/style.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,11 @@ h2 {
1717
font-weight: 600;
1818
}
1919

20+
21+
.fontsource-abeezee {
22+
font-family: "ABeeZee", sans-serif;
23+
}
24+
25+
. {
26+
font-family: "Truculenta", sans-serif;
27+
}

‎examples/vite/vite.config.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,21 @@ export default defineConfig({
1414
'Dancing Script': './assets/fonts/DancingScript*',
1515
},
1616
},
17+
18+
fontsource: {
19+
families: [
20+
{
21+
name: 'ABeeZee',
22+
weights: [400],
23+
styles: ['italic'],
24+
},
25+
{
26+
name: 'Truculenta',
27+
weights: [400, 700],
28+
subset: 'latin-ext',
29+
},
30+
],
31+
},
1732
}),
1833
],
1934
})

‎pnpm-lock.yaml

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/index.ts

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { createUnplugin } from 'unplugin'
22
import type { Options } from './types'
33
import { getHeadLinkTags } from './loaders'
4-
import { virtualModule } from './loaders/custom'
4+
import { fontsourceVirtualModule } from './loaders/fontsource'
5+
import { customVirtualModule } from './loaders/custom'
56

67
const MODULE_ID = 'unfonts.css'
78
const MODULE_ID_RESOLVED = '/@unplugin-fonts/fonts.css'
@@ -20,7 +21,17 @@ export default createUnplugin<Options | undefined>((userOptions) => {
2021

2122
load(id) {
2223
if (id === MODULE_ID_RESOLVED) {
23-
return options.custom ? virtualModule(options.custom, root) : ''
24+
const source: string[] = []
25+
26+
if (options.fontsource) {
27+
source.push(fontsourceVirtualModule(options.fontsource))
28+
}
29+
30+
if (options.custom) {
31+
source.push(customVirtualModule(options.custom, root))
32+
}
33+
34+
return source.join('\n\n')
2435
}
2536
},
2637
vite: {

‎src/loaders/custom.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ function resolveFontfaceFiles({ src, root }: {
204204
}))
205205
}
206206

207-
export function virtualModule(options: CustomFonts, root: string) {
207+
export function customVirtualModule(options: CustomFonts, root: string) {
208208
const css: string[] = []
209209

210210
/* eslint-disable prefer-const */
@@ -224,7 +224,6 @@ export function virtualModule(options: CustomFonts, root: string) {
224224
)
225225
}
226226

227-
228227
for (const { name, src, local } of families) {
229228
const faces = resolveFontfaceFiles({ src, root })
230229
.map((item) => ({

‎src/loaders/fontsource.ts

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
2+
export interface FontsourceFontFamily {
3+
name: string
4+
weights: (100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)[]
5+
styles?: ('italic' | 'normal')[]
6+
subset?: string
7+
}
8+
export interface FontsourceFonts {
9+
families: (string | FontsourceFontFamily)[]
10+
text?: string
11+
display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional'
12+
}
13+
14+
export function fontsourceVirtualModule(options?: FontsourceFonts) {
15+
const source: string[] = []
16+
17+
const {
18+
families = [],
19+
} = options || {}
20+
21+
for(const family of families) {
22+
if(typeof family === 'string') {
23+
source.push(`@import "@fontsource/${family.toLowerCase()}";`)
24+
} else {
25+
const {
26+
name,
27+
weights,
28+
styles,
29+
subset
30+
} = family
31+
32+
33+
const subsetPrefix = subset ? `${subset}-` : ''
34+
35+
if (weights) {
36+
for (const weight of weights) {
37+
if (styles) {
38+
for (const style of styles) {
39+
if (style === 'normal') {
40+
source.push(`@import "@fontsource/${name.toLowerCase()}/${subsetPrefix}${style}.css";`)
41+
} else {
42+
source.push(`@import "@fontsource/${name.toLowerCase()}/${subsetPrefix}${weight}-${style}.css";`)
43+
}
44+
}
45+
} else {
46+
source.push(`@import "@fontsource/${name.toLowerCase()}/${subsetPrefix}${weight}.css";`)
47+
}
48+
}
49+
} else {
50+
if (subset) {
51+
source.push(`@import "@fontsource/${name.toLowerCase()}/${subset}.css";`)
52+
} else {
53+
source.push(`@import "@fontsource/${name.toLowerCase()}";`)
54+
}
55+
}
56+
57+
}
58+
}
59+
60+
return source.join('\n')
61+
}

‎src/types.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
import type { CustomFonts } from './loaders/custom'
2+
import type { FontsourceFonts } from './loaders/fontsource'
13
import type { GoogleFonts } from './loaders/google-fonts'
24
import type { TypeKitFonts } from './loaders/typekit'
3-
import type { CustomFonts } from './loaders/custom'
45

56
export interface Options {
7+
custom?: CustomFonts
8+
fontsource?: FontsourceFonts
69
google?: GoogleFonts
710
typekit?: TypeKitFonts
8-
custom?: CustomFonts
911
}

0 commit comments

Comments
 (0)