createCompiler() — tailwindcss Function Reference

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

Function typescript Oxide Scanner calls 3 called by 1

Entity Profile

Oxide→ Scanner→ createCompiler() — tailwindcss Function Reference

Dependency Diagram

graph TD
  0a8e29f0_0853_474c_0fb8_4686e34304fd["createCompiler()"]
  23d03804_a9a2_99ea_5362_f402708f8ba3["index.ts"]
  0a8e29f0_0853_474c_0fb8_4686e34304fd -->|defined in| 23d03804_a9a2_99ea_5362_f402708f8ba3
  0047fefc_fb51_ceb3_8560_c129cba933be["rebuild()"]
  0047fefc_fb51_ceb3_8560_c129cba933be -->|calls| 0a8e29f0_0853_474c_0fb8_4686e34304fd
  22d4c2e8_dc90_1645_f8f6_7cf2d4b3c368["start()"]
  0a8e29f0_0853_474c_0fb8_4686e34304fd -->|calls| 22d4c2e8_dc90_1645_f8f6_7cf2d4b3c368
  380ff6a1_86ea_215c_f10c_9a1108a19f9a["observeSheet()"]
  0a8e29f0_0853_474c_0fb8_4686e34304fd -->|calls| 380ff6a1_86ea_215c_f10c_9a1108a19f9a
  b9dcd96f_6821_b870_253e_1083d8548c8a["end()"]
  0a8e29f0_0853_474c_0fb8_4686e34304fd -->|calls| b9dcd96f_6821_b870_253e_1083d8548c8a
  style 0a8e29f0_0853_474c_0fb8_4686e34304fd 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()
}