tailwindcss Architecture Docs
Home / File/ ui.spec.ts — tailwindcss Source File

ui.spec.ts — tailwindcss Source File

Architecture documentation for ui.spec.ts, a typescript file in the tailwindcss codebase. 10 imports, 0 dependents.

File typescript OxideEngine Scanner 10 imports 2 functions

Entity Profile

Dependency Diagram

graph LR
  4ccd2731_2148_46c0_9c34_d4351473d556["ui.spec.ts"]
  e09ef3f3_5e41_ad68_014b_afd42dbefec1["optimize.ts"]
  4ccd2731_2148_46c0_9c34_d4351473d556 --> e09ef3f3_5e41_ad68_014b_afd42dbefec1
  572b83a3_4e86_cb3e_cfb7_47fcd883c766["optimize"]
  4ccd2731_2148_46c0_9c34_d4351473d556 --> 572b83a3_4e86_cb3e_cfb7_47fcd883c766
  5af9cd3c_2cf4_9dee_376e_fc39122d865a["index.ts"]
  4ccd2731_2148_46c0_9c34_d4351473d556 --> 5af9cd3c_2cf4_9dee_376e_fc39122d865a
  9c33d37f_aea4_85fa_1eb9_f13429950630["compile"]
  4ccd2731_2148_46c0_9c34_d4351473d556 --> 9c33d37f_aea4_85fa_1eb9_f13429950630
  ef204000_8998_5a6c_5455_324b37624713["segment.ts"]
  4ccd2731_2148_46c0_9c34_d4351473d556 --> ef204000_8998_5a6c_5455_324b37624713
  f712ed47_45d4_4e5a_dd73_fdefa1da71da["segment"]
  4ccd2731_2148_46c0_9c34_d4351473d556 --> f712ed47_45d4_4e5a_dd73_fdefa1da71da
  763f32ff_b5f5_5f2c_9295_05ec73787a32["test"]
  4ccd2731_2148_46c0_9c34_d4351473d556 --> 763f32ff_b5f5_5f2c_9295_05ec73787a32
  8f3a837a_4918_fced_fe0d_2cfdb0bd2b31["oxide"]
  4ccd2731_2148_46c0_9c34_d4351473d556 --> 8f3a837a_4918_fced_fe0d_2cfdb0bd2b31
  6390fa3b_300d_6028_9e96_c869157db42d["node:fs"]
  4ccd2731_2148_46c0_9c34_d4351473d556 --> 6390fa3b_300d_6028_9e96_c869157db42d
  2a7660a5_3e09_bd74_37f0_e4e54bc64ce5["node:path"]
  4ccd2731_2148_46c0_9c34_d4351473d556 --> 2a7660a5_3e09_bd74_37f0_e4e54bc64ce5
  style 4ccd2731_2148_46c0_9c34_d4351473d556 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { expect, test, type Page } from '@playwright/test'
import { Scanner } from '@tailwindcss/oxide'
import fs from 'node:fs'
import path from 'node:path'
import { optimize } from '../../@tailwindcss-node/src/optimize'
import { compile } from '../src'
import { segment } from '../src/utils/segment'

const html = String.raw
const css = String.raw

test('touch action', async ({ page }) => {
  let { getPropertyValue } = await render(
    page,
    html`<div id="x" class="touch-pan-x touch-pan-y hover:touch-pinch-zoom">Hello world</div>`,
  )

  expect(await getPropertyValue('#x', 'touch-action')).toEqual('pan-x pan-y')

  await page.locator('#x').hover()

  expect([
    // `manipulation` is an alias for `pan-x pan-y pinch-zoom` and some engines
    // compute the combination of those three values to `manipulation` even when
    // explicitly set as three values.
    'manipulation',
    'pan-x pan-y pinch-zoom',
  ]).toContain(await getPropertyValue('#x', 'touch-action'))
})

for (let [classes, expected] of [
  [
    'bg-linear-to-r from-red',
    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
  ],
  [
    'bg-linear-to-r via-red',
    'linear-gradient(to right in oklab, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)',
  ],
  [
    'bg-linear-to-r to-red',
    'linear-gradient(to right in oklab, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 100%)',
  ],
  [
    'bg-linear-to-r from-red to-blue',
    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
  ],
  [
    'bg-linear-45 from-red to-blue',
    'linear-gradient(45deg in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
  ],
  [
    '-bg-linear-45 from-red to-blue',
    // Chrome reports a different (but also correct) computed value than Firefox/WebKit so we check
    // for both options.
    [
      'linear-gradient(-45deg in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
      'linear-gradient(calc(-45deg) in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
    ],
  ],
// ... (2213 more lines)

Domain

Subdomains

Functions

Dependencies

Source

Frequently Asked Questions

What does ui.spec.ts do?
ui.spec.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the OxideEngine domain, Scanner subdomain.
What functions are defined in ui.spec.ts?
ui.spec.ts defines 2 function(s): getPropertyValue, render.
What does ui.spec.ts depend on?
ui.spec.ts imports 10 module(s): compile, index.ts, node:fs, node:path, optimize, optimize.ts, oxide, segment, and 2 more.
Where is ui.spec.ts in the architecture?
ui.spec.ts is located at packages/tailwindcss/tests/ui.spec.ts (domain: OxideEngine, subdomain: Scanner, directory: packages/tailwindcss/tests).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free