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 CommandLineInterface 6 imports

Entity Profile

Dependency Diagram

graph LR
  bcb20eda_2bd7_ff25_6134_e91d834a79e1["candidates.test.ts"]
  53e05093_45c6_ed5a_9c90_dcc94281fddf["splice-changes-into-string.ts"]
  bcb20eda_2bd7_ff25_6134_e91d834a79e1 --> 53e05093_45c6_ed5a_9c90_dcc94281fddf
  e861d3a6_b533_683d_56f9_f09ab6c0d58e["spliceChangesIntoString"]
  bcb20eda_2bd7_ff25_6134_e91d834a79e1 --> e861d3a6_b533_683d_56f9_f09ab6c0d58e
  530db924_e458_e8b2_fde4_45f3e78b4424["candidates.ts"]
  bcb20eda_2bd7_ff25_6134_e91d834a79e1 --> 530db924_e458_e8b2_fde4_45f3e78b4424
  8b1ca68c_6690_d65e_cc71_429e9efe9dc5["extractRawCandidates"]
  bcb20eda_2bd7_ff25_6134_e91d834a79e1 --> 8b1ca68c_6690_d65e_cc71_429e9efe9dc5
  08129f89_e6ef_0092_629d_821c60228c89["node"]
  bcb20eda_2bd7_ff25_6134_e91d834a79e1 --> 08129f89_e6ef_0092_629d_821c60228c89
  f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3["vitest"]
  bcb20eda_2bd7_ff25_6134_e91d834a79e1 --> f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3
  style bcb20eda_2bd7_ff25_6134_e91d834a79e1 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 CommandLineInterface 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: CommandLineInterface, 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