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

variants.test.ts — tailwindcss Source File

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

File typescript Oxide 10 imports

Entity Profile

Dependency Diagram

graph LR
  e40a99c9_2b30_3467_4e76_993a7f6bc490["variants.test.ts"]
  914a5326_dcdd_e839_bbc4_d6545cf4c5d5["plugin.ts"]
  e40a99c9_2b30_3467_4e76_993a7f6bc490 --> 914a5326_dcdd_e839_bbc4_d6545cf4c5d5
  4089a8b5_4817_1d8d_4818_6b91ee92855d["createPlugin"]
  e40a99c9_2b30_3467_4e76_993a7f6bc490 --> 4089a8b5_4817_1d8d_4818_6b91ee92855d
  f9b7eac1_3b10_a208_408b_b98998a33868["run.ts"]
  e40a99c9_2b30_3467_4e76_993a7f6bc490 --> f9b7eac1_3b10_a208_408b_b98998a33868
  b8347223_2c86_b56c_bee4_53f1b5cc1312["compileCss"]
  e40a99c9_2b30_3467_4e76_993a7f6bc490 --> b8347223_2c86_b56c_bee4_53f1b5cc1312
  92340182_e1dc_9cec_da39_d46674e865cd["run"]
  e40a99c9_2b30_3467_4e76_993a7f6bc490 --> 92340182_e1dc_9cec_da39_d46674e865cd
  b638ddb2_c057_1f3c_8a1a_4993ad80cd58["variants.ts"]
  e40a99c9_2b30_3467_4e76_993a7f6bc490 --> b638ddb2_c057_1f3c_8a1a_4993ad80cd58
  5a7fada2_21be_1891_22a5_70dd440f2e0f["Compounds"]
  e40a99c9_2b30_3467_4e76_993a7f6bc490 --> 5a7fada2_21be_1891_22a5_70dd440f2e0f
  ed286c50_134b_5b5b_ff58_76456160010c["compoundsForSelectors"]
  e40a99c9_2b30_3467_4e76_993a7f6bc490 --> ed286c50_134b_5b5b_ff58_76456160010c
  8ff4bb92_b963_efb6_cca2_1da4b3ea849b["dedent"]
  e40a99c9_2b30_3467_4e76_993a7f6bc490 --> 8ff4bb92_b963_efb6_cca2_1da4b3ea849b
  f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3["vitest"]
  e40a99c9_2b30_3467_4e76_993a7f6bc490 --> f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3
  style e40a99c9_2b30_3467_4e76_993a7f6bc490 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import dedent from 'dedent'
import { expect, test } from 'vitest'
import createPlugin from './plugin'
import { compileCss, run } from './test-utils/run'
import { Compounds, compoundsForSelectors } from './variants'

const css = String.raw

test('*', async () => {
  expect(await run(['*:flex'])).toMatchInlineSnapshot(`
    ":is(.\\*\\:flex > *) {
      display: flex;
    }"
  `)
  expect(await run(['*/foo:flex'])).toEqual('')
})

test('**', async () => {
  expect(await run(['**:flex'])).toMatchInlineSnapshot(`
    ":is(.\\*\\*\\:flex *) {
      display: flex;
    }"
  `)
  expect(await run(['**/foo:flex'])).toEqual('')
})

test('first-letter', async () => {
  expect(await run(['first-letter:flex'])).toMatchInlineSnapshot(`
    ".first-letter\\:flex:first-letter {
      display: flex;
    }"
  `)
  expect(await run(['first-letter/foo:flex'])).toEqual('')
})

test('first-line', async () => {
  expect(await run(['first-line:flex'])).toMatchInlineSnapshot(`
    ".first-line\\:flex:first-line {
      display: flex;
    }"
  `)
  expect(await run(['first-line/foo:flex'])).toEqual('')
})

test('marker', async () => {
  expect(await run(['marker:flex'])).toMatchInlineSnapshot(`
    ".marker\\:flex ::marker {
      display: flex;
    }

    .marker\\:flex::marker {
      display: flex;
    }

    .marker\\:flex ::-webkit-details-marker {
      display: flex;
    }

    .marker\\:flex::-webkit-details-marker {
      display: flex;
// ... (2572 more lines)

Domain

Dependencies

Source

Frequently Asked Questions

What does variants.test.ts do?
variants.test.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the Oxide domain.
What does variants.test.ts depend on?
variants.test.ts imports 10 module(s): Compounds, compileCss, compoundsForSelectors, createPlugin, dedent, plugin.ts, run, run.ts, and 2 more.
Where is variants.test.ts in the architecture?
variants.test.ts is located at packages/tailwindcss/src/variants.test.ts (domain: Oxide, directory: packages/tailwindcss/src).

Analyze Your Own Codebase

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

Try Supermodel Free