render() — tailwindcss Function Reference

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

Function typescript OxideEngine Scanner calls 4

Entity Profile

OxideEngine→ Scanner→ render() — tailwindcss Function Reference

Dependency Diagram

graph TD
  9145d6d8_3bea_1987_00eb_b9dbd7e9cb8d["render()"]
  4ccd2731_2148_46c0_9c34_d4351473d556["ui.spec.ts"]
  9145d6d8_3bea_1987_00eb_b9dbd7e9cb8d -->|defined in| 4ccd2731_2148_46c0_9c34_d4351473d556
  9c33d37f_aea4_85fa_1eb9_f13429950630["compile()"]
  9145d6d8_3bea_1987_00eb_b9dbd7e9cb8d -->|calls| 9c33d37f_aea4_85fa_1eb9_f13429950630
  572b83a3_4e86_cb3e_cfb7_47fcd883c766["optimize()"]
  9145d6d8_3bea_1987_00eb_b9dbd7e9cb8d -->|calls| 572b83a3_4e86_cb3e_cfb7_47fcd883c766
  cbd2dae8_fa66_4365_0be4_4d91c2f5bba4["getPropertyValue()"]
  9145d6d8_3bea_1987_00eb_b9dbd7e9cb8d -->|calls| cbd2dae8_fa66_4365_0be4_4d91c2f5bba4
  f712ed47_45d4_4e5a_dd73_fdefa1da71da["segment()"]
  9145d6d8_3bea_1987_00eb_b9dbd7e9cb8d -->|calls| f712ed47_45d4_4e5a_dd73_fdefa1da71da
  style 9145d6d8_3bea_1987_00eb_b9dbd7e9cb8d 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())
    },
  }
}