createCompiler() — tailwindcss Function Reference

Architecture documentation for the createCompiler() function in index.ts from the tailwindcss codebase.

Function typescript RustCore PreProcessors calls 3 called by 1

Entity Profile

RustCore→ PreProcessors→ createCompiler() — tailwindcss Function Reference

Dependency Diagram

graph TD
  69079398_554e_04ce_40cb_d3d9b2f34756["createCompiler()"]
  bd384a93_4375_9e58_14d8_c32d19d5fc44["rebuild()"]
  bd384a93_4375_9e58_14d8_c32d19d5fc44 -->|calls| 69079398_554e_04ce_40cb_d3d9b2f34756
  f7c4598e_5890_20a6_b6f1_e2f970784e25["start()"]
  69079398_554e_04ce_40cb_d3d9b2f34756 -->|calls| f7c4598e_5890_20a6_b6f1_e2f970784e25
  617188b9_fa8b_c630_b3b8_529f4e99041a["observeSheet()"]
  69079398_554e_04ce_40cb_d3d9b2f34756 -->|calls| 617188b9_fa8b_c630_b3b8_529f4e99041a
  f286d664_f8f7_6e0c_5782_e9d6569768d9["end()"]
  69079398_554e_04ce_40cb_d3d9b2f34756 -->|calls| f286d664_f8f7_6e0c_5782_e9d6569768d9
  style 69079398_554e_04ce_40cb_d3d9b2f34756 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-browser/src/index.ts lines 60–107

async function createCompiler() {
  I.start(`Create compiler`)
  I.start('Reading Stylesheets')

  // The stylesheets may have changed causing a full rebuild so we'll need to
  // gather the latest list of stylesheets.
  let stylesheets: Iterable<HTMLStyleElement> = document.querySelectorAll(
    `style[type="${STYLE_TYPE}"]`,
  )

  let css = ''
  for (let sheet of stylesheets) {
    observeSheet(sheet)
    css += sheet.textContent + '\n'
  }

  // The user might have no stylesheets, or a some stylesheets without `@import`
  // because they want to customize their theme so we'll inject the main import
  // for them. However, if they start using `@import` we'll let them control
  // the build completely.
  if (!css.includes('@import')) {
    css = `@import "tailwindcss";${css}`
  }

  I.end('Reading Stylesheets', {
    size: css.length,
    changed: lastCss !== css,
  })

  // The input CSS did not change so the compiler does not need to be recreated
  if (lastCss === css) return

  lastCss = css

  I.start('Compile CSS')
  try {
    compiler = await tailwindcss.compile(css, {
      base: '/',
      loadStylesheet,
      loadModule,
    })
  } finally {
    I.end('Compile CSS')
    I.end(`Create compiler`)
  }

  classes.clear()
}