Function embedWebFont

src/embed-web-font.ts:6–120

(
  clone: T,
  context: Context,
)

import { isCssFontFaceRule, isCSSImportRule, isLayerBlockRule, resolveUrl, splitFontFamily } from './utils'

export async function embedWebFont<T extends Element>(
  clone: T,
  context: Context,
): Promise<void> {
  const {
    ownerDocument,
    svgStyleElement,
    fontFamilies,
    fontCssTexts,
    tasks,
    font,
  } = context

  if (
    !ownerDocument
    || !svgStyleElement
    || !fontFamilies.size
  ) {
    return
  }

  if (font && font.cssText) {
    const cssText = filterPreferredFormat(font.cssText, context)
    svgStyleElement.appendChild(ownerDocument.createTextNode(`${cssText}\n`))
  }
  else {
    const styleSheets = Array.from(ownerDocument.styleSheets).filter((styleSheet) => {
      try {
        return 'cssRules' in styleSheet && Boolean(styleSheet.cssRules.length)
      }
      catch (error) {
        context.log.warn(`Error while reading CSS rules from ${styleSheet.href}`, error)
        return false
      }
    })

    // Collect rules from @import declarations into a detached stylesheet
    // to avoid mutating the live document's stylesheets via insertRule().
    const tempDoc = ownerDocument.implementation.createHTMLDocument('')
    const tempStyleEl = tempDoc.createElement('style')
    tempDoc.head.appendChild(tempStyleEl)
    const tempStyleSheet = tempStyleEl.sheet!

    await Promise.all(
      styleSheets.flatMap((styleSheet) => {
        return Array.from(styleSheet.cssRules).map(async (cssRule) => {
          if (isCSSImportRule(cssRule)) {
            const baseUrl = cssRule.href
            let cssText = ''
            try {
              cssText = await contextFetch(context, {
                url: baseUrl,
                requestType: 'text',
                responseType: 'text',
              })
            }
            catch (error) {
              context.log.warn(`Error fetch remote css import from ${baseUrl}`, error)