createCompiler() — tailwindcss Function Reference

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

Function typescript OxideEngine Scanner calls 3 called by 1

Entity Profile

OxideEngine→ Scanner→ createCompiler() — tailwindcss Function Reference

Dependency Diagram

graph TD
  a25ad0ad_f7bc_1221_9e16_64c09e9b41a8["createCompiler()"]
  d3ff87a1_ef49_dab7_2e4d_39270282fbd2["index.ts"]
  a25ad0ad_f7bc_1221_9e16_64c09e9b41a8 -->|defined in| d3ff87a1_ef49_dab7_2e4d_39270282fbd2
  7f171710_9b1b_41c0_3b52_f28ad8b73b9b["rebuild()"]
  7f171710_9b1b_41c0_3b52_f28ad8b73b9b -->|calls| a25ad0ad_f7bc_1221_9e16_64c09e9b41a8
  cf422f78_6ab4_fb1c_ff00_0ad0b93b5386["start()"]
  a25ad0ad_f7bc_1221_9e16_64c09e9b41a8 -->|calls| cf422f78_6ab4_fb1c_ff00_0ad0b93b5386
  d8f7a31c_f0ac_20b5_6bc3_5d81e71e9639["observeSheet()"]
  a25ad0ad_f7bc_1221_9e16_64c09e9b41a8 -->|calls| d8f7a31c_f0ac_20b5_6bc3_5d81e71e9639
  ca962c6e_e07f_61c5_168b_1f3b845c1371["end()"]
  a25ad0ad_f7bc_1221_9e16_64c09e9b41a8 -->|calls| ca962c6e_e07f_61c5_168b_1f3b845c1371
  style a25ad0ad_f7bc_1221_9e16_64c09e9b41a8 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()
}