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 Oxide Extractor 4 imports 5 functions

Entity Profile

Dependency Diagram

graph LR
  69a28f5e_2075_0282_fbb9_22eea3ba130b["sort.test.ts"]
  bdedd2f6_da4b_69dc_e990_0814b59fbe6e["design-system.ts"]
  69a28f5e_2075_0282_fbb9_22eea3ba130b --> bdedd2f6_da4b_69dc_e990_0814b59fbe6e
  23bd4e2f_c62c_a942_7014_8486569053ee["index.ts"]
  69a28f5e_2075_0282_fbb9_22eea3ba130b --> 23bd4e2f_c62c_a942_7014_8486569053ee
  a1fd01c1_0fb9_2557_6ee0_a660cb46e83b["__unstable__loadDesignSystem"]
  69a28f5e_2075_0282_fbb9_22eea3ba130b --> a1fd01c1_0fb9_2557_6ee0_a660cb46e83b
  f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3["vitest"]
  69a28f5e_2075_0282_fbb9_22eea3ba130b --> f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3
  style 69a28f5e_2075_0282_fbb9_22eea3ba130b 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 Oxide domain, Extractor 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: Oxide, subdomain: Extractor, directory: packages/tailwindcss/src).

Analyze Your Own Codebase

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

Try Supermodel Free