fetchStyles() — tailwindcss Function Reference

Architecture documentation for the fetchStyles() function in utils.ts from the tailwindcss codebase.

Function typescript Oxide PreProcessors

Entity Profile

Oxide→ PreProcessors→ fetchStyles() — tailwindcss Function Reference

Dependency Diagram

graph TD
  522399f9_a5a8_fa94_794a_917ab0d0a66d["fetchStyles()"]
  7600373a_3645_efb1_bcbb_e7c3fcb813ac["utils.ts"]
  522399f9_a5a8_fa94_794a_917ab0d0a66d -->|defined in| 7600373a_3645_efb1_bcbb_e7c3fcb813ac
  style 522399f9_a5a8_fa94_794a_917ab0d0a66d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

integrations/utils.ts lines 564–607

export async function fetchStyles(base: string, path = '/'): Promise<string> {
  while (base.endsWith('/')) {
    base = base.slice(0, -1)
  }

  let index = await fetch(`${base}${path}`)
  let html = await index.text()

  let linkRegex = /<link rel="stylesheet" href="([a-zA-Z0-9\/_\.\?=%-]+)"/gi
  let styleRegex = /<style\b[^>]*>([\s\S]*?)<\/style>/gi

  let stylesheets: string[] = []

  let paths: string[] = []
  for (let match of html.matchAll(linkRegex)) {
    let path: string = match[1]
    if (path.startsWith('./')) {
      path = path.slice(1)
    }
    paths.push(path)
  }
  stylesheets.push(
    ...(await Promise.all(
      paths.map(async (path) => {
        let css = await fetch(`${base}${path}`, {
          headers: {
            Accept: 'text/css',
          },
        })
        return await css.text()
      }),
    )),
  )

  for (let match of html.matchAll(styleRegex)) {
    stylesheets.push(match[1])
  }

  return stylesheets.reduce((acc, css) => {
    if (acc.length > 0) acc += '\n'
    acc += css
    return acc
  }, '')
}