fetchStyles() — tailwindcss Function Reference

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

Function typescript OxideEngine PreProcessors

Entity Profile

OxideEngine→ PreProcessors→ fetchStyles() — tailwindcss Function Reference

Dependency Diagram

graph TD
  41c6e4f2_197a_5e83_1beb_584bbb4130fa["fetchStyles()"]
  9ffd1dda_9675_c514_373d_0f4ab4648249["utils.ts"]
  41c6e4f2_197a_5e83_1beb_584bbb4130fa -->|defined in| 9ffd1dda_9675_c514_373d_0f4ab4648249
  style 41c6e4f2_197a_5e83_1beb_584bbb4130fa 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
  }, '')
}