Function render

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

(page: Page, content: string, extraCss: string = '')

const defaultTheme = fs.readFileSync(path.resolve(__dirname, '..', 'theme.css'), 'utf-8')

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())