How to load CSS from node_modules

[nekochan0122]

Im using fontsource to load the fonts in my Next.js app:

import '@fontsource-variable/inter'
import '@fontsource-variable/noto-sans-tc'
import '@fontsource-variable/jetbrains-mono'
....

The css option only allow me to use url and what if I want to use mutiple fonts (for other language), how do I load them.

[nekochan0122]

I just found the solution from ur repo 🤣

https://github.com/remcohaszing/mermaid-isomorphic/blob/db085150fe97c79db3334811c36ac8275b412495/src/mermaid-isomorphic.ts#L15-L21

import { createRequire } from 'node:module'
import { pathToFileURL } from 'node:url'

const require = createRequire(import.meta.url)
// this is the url from node_modules
const jetbrainMono = String(pathToFileURL(require.resolve('@fontsource-variable/jetbrains-mono'))) 

but how to load multiple css urls?

[remcohaszing]

I just released version 2.2.0, which supports passing an iterable of CSS URLs.

import { createRequire } from 'node:module'
import { pathToFileURL } from 'node:url'

const require = createRequire(import.meta.url)
// this is the url from node_modules
const jetbrainMono = String(pathToFileURL(require.resolve('@fontsource-variable/jetbrains-mono'))) 

Note that `mermaid-isomorphic converts URL objects to string. Your code is fine, but you can omit the string casting if you want.

import { createRequire } from 'node:module'
import { pathToFileURL } from 'node:url'

const require = createRequire(import.meta.url)
const jetbrainMono = pathToFileURL(require.resolve('@fontsource-variable/jetbrains-mono'))

[nekochan0122]

I just released version 2.2.0, which supports passing an iterable of CSS URLs.

Hello, I got another issues in 2.2.0, it will show this error when u pass 2 CSS URLs, but 1 is is ok:

Im pretty sure the URLs are correct, cuz I tried to put them 1 by 1 ( If A / B only, the libiray works).

[remcohaszing]

I’m not sure what caused this, but I fixed it in version 2.2.1.