createCompiler() — tailwindcss Function Reference

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

Function typescript OxideCore Scanner calls 4 called by 1

Entity Profile

OxideCore→ Scanner→ createCompiler() — tailwindcss Function Reference

Dependency Diagram

graph TD
  1f9197e1_4bbd_21b6_da7e_de2319e5ff8f["createCompiler()"]
  79efb43f_fcca_c5cf_0bb0_c18f1a2fffc0["rebuild()"]
  79efb43f_fcca_c5cf_0bb0_c18f1a2fffc0 -->|calls| 1f9197e1_4bbd_21b6_da7e_de2319e5ff8f
  53ebf260_055a_065a_97c6_10bc1d92476b["start()"]
  1f9197e1_4bbd_21b6_da7e_de2319e5ff8f -->|calls| 53ebf260_055a_065a_97c6_10bc1d92476b
  eee032af_9e2d_8679_98de_cda5ff0d41d4["observeSheet()"]
  1f9197e1_4bbd_21b6_da7e_de2319e5ff8f -->|calls| eee032af_9e2d_8679_98de_cda5ff0d41d4
  020a5eed_39cf_05ec_e603_096fba2472da["end()"]
  1f9197e1_4bbd_21b6_da7e_de2319e5ff8f -->|calls| 020a5eed_39cf_05ec_e603_096fba2472da
  38bfe51e_e2b6_fcde_5ec2_9e78b758e748["compile()"]
  1f9197e1_4bbd_21b6_da7e_de2319e5ff8f -->|calls| 38bfe51e_e2b6_fcde_5ec2_9e78b758e748
  style 1f9197e1_4bbd_21b6_da7e_de2319e5ff8f 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()
}