render() — tailwindcss Function Reference

Architecture documentation for the render() function in ui.spec.ts from the tailwindcss codebase.

Function typescript Oxide Scanner calls 4

Entity Profile

Oxide→ Scanner→ render() — tailwindcss Function Reference

Dependency Diagram

graph TD
  4c9ec9aa_6fa1_c418_ce6a_63ab7fcf8a66["render()"]
  3dc429a0_5545_c843_5c3d_ae12e834e123["ui.spec.ts"]
  4c9ec9aa_6fa1_c418_ce6a_63ab7fcf8a66 -->|defined in| 3dc429a0_5545_c843_5c3d_ae12e834e123
  c59be670_b950_e897_c2ef_f6a86119dcc3["compile()"]
  4c9ec9aa_6fa1_c418_ce6a_63ab7fcf8a66 -->|calls| c59be670_b950_e897_c2ef_f6a86119dcc3
  b082614d_1264_c8b0_a1b1_d0c85419e965["optimize()"]
  4c9ec9aa_6fa1_c418_ce6a_63ab7fcf8a66 -->|calls| b082614d_1264_c8b0_a1b1_d0c85419e965
  473544e4_b8d4_e837_356d_1329d7248165["getPropertyValue()"]
  4c9ec9aa_6fa1_c418_ce6a_63ab7fcf8a66 -->|calls| 473544e4_b8d4_e837_356d_1329d7248165
  c58cbb33_f3cc_0b4f_844a_15bf66a1dc61["segment()"]
  4c9ec9aa_6fa1_c418_ce6a_63ab7fcf8a66 -->|calls| c58cbb33_f3cc_0b4f_844a_15bf66a1dc61
  style 4c9ec9aa_6fa1_c418_ce6a_63ab7fcf8a66 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/tests/ui.spec.ts lines 2185–2245

async function render(page: Page, content: string, extraCss: string = '') {
  let { build } = await compile(css`
    @layer theme, base, components, utilities;
    @layer theme {
      ${defaultTheme}

      @theme {
        --color-red: rgb(255, 0, 0);
        --color-green: rgb(0, 255, 0);
        --color-blue: rgb(0, 0, 255);
        --color-black: black;
        --color-transparent: transparent;
      }
    }
    @layer base {
      ${preflight}
    }
    @layer utilities {
      @tailwind utilities;
    }
    ${extraCss}
  `)

  // We noticed that some of the tests depending on the `hover:` variant were
  // flaky. After some investigation, we found that injected elements had the
  // `:hover` state without us explicitly hovering over the element.
  //
  // To avoid this, we now set up an explicit placeholder element to move the
  // mouse to before running the tests.
  content = `<div id="mouse-park" class="size-12"></div>${content}`

  let scanner = new Scanner({})
  let candidates = scanner.scanFiles([{ content, extension: 'html' }])

  let { code: styles } = optimize(build(candidates))

  content = `<style type="text/css">${styles}</style>${content}`
  await page.setContent(content)

  await page.locator('#mouse-park').hover()

  return {
    getPropertyValue(selector: string | [string, string], property: string) {
      return getPropertyValue(
        page,
        Array.isArray(selector) ? selector : [selector, undefined],
        property,
      )
    },

    async getPropertyList(selector: string | [string, string], property: string) {
      let value = await getPropertyValue(
        page,
        Array.isArray(selector) ? selector : [selector, undefined],
        property,
      )

      return segment(value, ',').map((item) => item.trim())
    },
  }
}