tailwindcss Architecture Docs
Home / File/ candidates.test.ts — tailwindcss Source File

candidates.test.ts — tailwindcss Source File

Architecture documentation for candidates.test.ts, a typescript file in the tailwindcss codebase. 6 imports, 0 dependents.

File typescript UpgradeToolkit 6 imports

Entity Profile

Dependency Diagram

graph LR
  31e76df5_525e_7bba_21f3_1c1c32817d76["candidates.test.ts"]
  d8b3b0ab_e770_e110_7520_a6fdabeda83a["splice-changes-into-string.ts"]
  31e76df5_525e_7bba_21f3_1c1c32817d76 --> d8b3b0ab_e770_e110_7520_a6fdabeda83a
  0ad23c56_9291_b80b_7e43_b919fbc7087f["spliceChangesIntoString"]
  31e76df5_525e_7bba_21f3_1c1c32817d76 --> 0ad23c56_9291_b80b_7e43_b919fbc7087f
  6818f003_fa74_ca6e_8dd1_99a7154be5c9["candidates.ts"]
  31e76df5_525e_7bba_21f3_1c1c32817d76 --> 6818f003_fa74_ca6e_8dd1_99a7154be5c9
  f2c36345_eddf_1720_9a42_e1a49f2c7132["extractRawCandidates"]
  31e76df5_525e_7bba_21f3_1c1c32817d76 --> f2c36345_eddf_1720_9a42_e1a49f2c7132
  92f2d961_72a4_d195_92d7_2e66972f8894["node"]
  31e76df5_525e_7bba_21f3_1c1c32817d76 --> 92f2d961_72a4_d195_92d7_2e66972f8894
  696bd648_5f24_1b59_8e8b_7a97a692869e["vitest"]
  31e76df5_525e_7bba_21f3_1c1c32817d76 --> 696bd648_5f24_1b59_8e8b_7a97a692869e
  style 31e76df5_525e_7bba_21f3_1c1c32817d76 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { __unstable__loadDesignSystem } from '@tailwindcss/node'
import { expect, test } from 'vitest'
import { spliceChangesIntoString } from '../../utils/splice-changes-into-string'
import { extractRawCandidates } from './candidates'

let html = String.raw

test('extracts candidates with positions from a template', async () => {
  let content = html`
    <div class="bg-blue-500 hover:focus:text-white [color:red]">
      <button class="bg-blue-500 text-white">My button</button>
    </div>
  `
  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
    base: __dirname,
  })

  let candidates = await extractRawCandidates(content, 'html')
  let validCandidates = candidates.filter(
    ({ rawCandidate }) => designSystem.parseCandidate(rawCandidate).length > 0,
  )

  expect(validCandidates).toMatchInlineSnapshot(`
    [
      {
        "end": 28,
        "rawCandidate": "bg-blue-500",
        "start": 17,
      },
      {
        "end": 51,
        "rawCandidate": "hover:focus:text-white",
        "start": 29,
      },
      {
        "end": 63,
        "rawCandidate": "[color:red]",
        "start": 52,
      },
      {
        "end": 98,
        "rawCandidate": "bg-blue-500",
        "start": 87,
      },
      {
        "end": 109,
        "rawCandidate": "text-white",
        "start": 99,
      },
    ]
  `)
})

test('replaces the right positions for a candidate', async () => {
  let content = html`
    <h1>🤠👋</h1>
    <div class="bg-blue-500" />
  `

  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
    base: __dirname,
  })

  let candidates = await extractRawCandidates(content, 'html')

  let candidate = candidates.find(
    ({ rawCandidate }) => designSystem.parseCandidate(rawCandidate).length > 0,
  )!

  let migrated = spliceChangesIntoString(content, [
    {
      start: candidate.start,
      end: candidate.end,
      replacement: 'flex',
    },
  ])

  expect(migrated).toMatchInlineSnapshot(`
    "
        <h1>🤠👋</h1>
        <div class="flex" />
      "
  `)
})

Domain

Dependencies

Source

Frequently Asked Questions

What does candidates.test.ts do?
candidates.test.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the UpgradeToolkit domain.
What does candidates.test.ts depend on?
candidates.test.ts imports 6 module(s): candidates.ts, extractRawCandidates, node, splice-changes-into-string.ts, spliceChangesIntoString, vitest.
Where is candidates.test.ts in the architecture?
candidates.test.ts is located at packages/@tailwindcss-upgrade/src/codemods/template/candidates.test.ts (domain: UpgradeToolkit, directory: packages/@tailwindcss-upgrade/src/codemods/template).

Analyze Your Own Codebase

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

Try Supermodel Free