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

sort.test.ts — tailwindcss Source File

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

File typescript OxideEngine PreProcessors 4 imports 5 functions

Entity Profile

Dependency Diagram

graph LR
  35c3c06c_16c4_cf74_8db0_ff582227714d["sort.test.ts"]
  7fd72d4c_e95c_d849_1002_1e1c9d8aca1a["design-system.ts"]
  35c3c06c_16c4_cf74_8db0_ff582227714d --> 7fd72d4c_e95c_d849_1002_1e1c9d8aca1a
  5af9cd3c_2cf4_9dee_376e_fc39122d865a["index.ts"]
  35c3c06c_16c4_cf74_8db0_ff582227714d --> 5af9cd3c_2cf4_9dee_376e_fc39122d865a
  28a4a0ba_405e_2b1a_b1d1_5f3944486a8f["__unstable__loadDesignSystem"]
  35c3c06c_16c4_cf74_8db0_ff582227714d --> 28a4a0ba_405e_2b1a_b1d1_5f3944486a8f
  696bd648_5f24_1b59_8e8b_7a97a692869e["vitest"]
  35c3c06c_16c4_cf74_8db0_ff582227714d --> 696bd648_5f24_1b59_8e8b_7a97a692869e
  style 35c3c06c_16c4_cf74_8db0_ff582227714d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { expect, test } from 'vitest'
import { type DesignSystem } from './design-system'
import { __unstable__loadDesignSystem } from './index'

function loadDesign() {
  return __unstable__loadDesignSystem(`
    @theme {
      --spacing-1: 0.25rem;
      --spacing-3: 0.75rem;
      --spacing-4: 1rem;
      --color-red-500: red;
      --color-blue-500: blue;
    }
  `)
}

const table = [
  // Utilities
  ['py-3 p-1 px-3', 'p-1 px-3 py-3'],

  // Utilities with variants
  ['px-3 focus:hover:p-3 hover:p-1 py-3', 'px-3 py-3 hover:p-1 focus:hover:p-3'],

  // Utilities with important
  ['px-3 py-4! p-1', 'p-1 px-3 py-4!'],
  ['py-4! px-3 p-1', 'p-1 px-3 py-4!'],

  // User CSS order is the same and moved to the front
  ['b p-1 a', 'b a p-1'],
  ['hover:b focus:p-1 a', 'hover:b a focus:p-1'],

  // Add special treatment for `group`, `peer`, and `dark`
  // ['peer a underline', 'a peer underline'],
  // ['group a underline', 'a group underline'],
  // ['dark a underline', 'a dark underline'],
] as const

test.each(table)('sorts classes: "%s" -> "%s"', async (input, expected) => {
  expect(sortClasses(input, await loadDesign())).toEqual(expected)
})

test.skip('group, peer, and dark have their own order', async () => {
  let input = shuffle(['group', 'peer', 'dark']).join(' ')
  expect(sortClasses(input, await loadDesign())).toEqual('dark group peer')
})

test('can sort classes deterministically across multiple class lists', async () => {
  let classes = [
    [
      'a-class px-3 p-1 b-class py-3 bg-red-500 bg-blue-500',
      'a-class b-class bg-blue-500 bg-red-500 p-1 px-3 py-3',
    ],
    [
      'px-3 b-class p-1 py-3 bg-blue-500 a-class bg-red-500',
      'b-class a-class bg-blue-500 bg-red-500 p-1 px-3 py-3',
    ],
  ]

  // Shared design
  let design = await loadDesign()
// ... (70 more lines)

Domain

Subdomains

Functions

Dependencies

Source

Frequently Asked Questions

What does sort.test.ts do?
sort.test.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the OxideEngine domain, PreProcessors subdomain.
What functions are defined in sort.test.ts?
sort.test.ts defines 5 function(s): bigSign, defaultSort, loadDesign, shuffle, sortClasses.
What does sort.test.ts depend on?
sort.test.ts imports 4 module(s): __unstable__loadDesignSystem, design-system.ts, index.ts, vitest.
Where is sort.test.ts in the architecture?
sort.test.ts is located at packages/tailwindcss/src/sort.test.ts (domain: OxideEngine, subdomain: PreProcessors, directory: packages/tailwindcss/src).

Analyze Your Own Codebase

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

Try Supermodel Free