tailwindcss Architecture Docs
Home / File/ css-functions.test.ts — tailwindcss Source File

css-functions.test.ts — tailwindcss Source File

Architecture documentation for css-functions.test.ts, a typescript file in the tailwindcss codebase. 8 imports, 0 dependents.

File typescript OxideEngine 8 imports

Entity Profile

Dependency Diagram

graph LR
  8f305dcc_848c_1209_8189_d1dc2378bdec["css-functions.test.ts"]
  fda9325c_b5ff_9f58_5fbb_98511cb0b478["plugin.ts"]
  8f305dcc_848c_1209_8189_d1dc2378bdec --> fda9325c_b5ff_9f58_5fbb_98511cb0b478
  cf14281b_29d9_c059_3148_2e2cc2fe19ae["run.ts"]
  8f305dcc_848c_1209_8189_d1dc2378bdec --> cf14281b_29d9_c059_3148_2e2cc2fe19ae
  4c014585_4ec9_378c_bc1a_9d4ad5c2708c["compileCss"]
  8f305dcc_848c_1209_8189_d1dc2378bdec --> 4c014585_4ec9_378c_bc1a_9d4ad5c2708c
  85b013b1_163d_9594_1737_4dd7f391d8ce["optimizeCss"]
  8f305dcc_848c_1209_8189_d1dc2378bdec --> 85b013b1_163d_9594_1737_4dd7f391d8ce
  8118fcf2_a51d_d1a1_93d3_c71d3a646692["promises"]
  8f305dcc_848c_1209_8189_d1dc2378bdec --> 8118fcf2_a51d_d1a1_93d3_c71d3a646692
  2a7660a5_3e09_bd74_37f0_e4e54bc64ce5["node:path"]
  8f305dcc_848c_1209_8189_d1dc2378bdec --> 2a7660a5_3e09_bd74_37f0_e4e54bc64ce5
  696bd648_5f24_1b59_8e8b_7a97a692869e["vitest"]
  8f305dcc_848c_1209_8189_d1dc2378bdec --> 696bd648_5f24_1b59_8e8b_7a97a692869e
  901927f2_bc06_7bba_3b59_6521372af070["."]
  8f305dcc_848c_1209_8189_d1dc2378bdec --> 901927f2_bc06_7bba_3b59_6521372af070
  style 8f305dcc_848c_1209_8189_d1dc2378bdec fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import fs from 'node:fs/promises'
import path from 'node:path'
import { describe, expect, test } from 'vitest'
import { compile } from '.'
import plugin from './plugin'
import { compileCss, optimizeCss } from './test-utils/run'

const css = String.raw

describe('--alpha(…)', () => {
  test('--alpha(…)', async () => {
    expect(
      await compileCss(css`
        .foo {
          margin: --alpha(red / 50%);
        }
      `),
    ).toMatchInlineSnapshot(`
      ".foo {
        margin: oklab(62.7955% .224 .125 / .5);
      }"
    `)
  })

  test('--alpha(…) errors when no arguments are used', async () => {
    await expect(() =>
      compileCss(css`
        .foo {
          margin: --alpha();
        }
      `),
    ).rejects.toThrowErrorMatchingInlineSnapshot(
      `[Error: The --alpha(…) function requires a color and an alpha value, e.g.: \`--alpha(var(--my-color) / 50%)\`]`,
    )
  })

  test('--alpha(…) errors when alpha value is missing', async () => {
    await expect(() =>
      compileCss(css`
        .foo {
          margin: --alpha(red);
        }
      `),
    ).rejects.toThrowErrorMatchingInlineSnapshot(
      `[Error: The --alpha(…) function requires a color and an alpha value, e.g.: \`--alpha(red / 50%)\`]`,
    )
  })

  test('--alpha(…) errors multiple arguments are used', async () => {
    await expect(() =>
      compileCss(css`
        .foo {
          margin: --alpha(red / 50%, blue);
        }
      `),
    ).rejects.toThrowErrorMatchingInlineSnapshot(
      `[Error: The --alpha(…) function only accepts one argument, e.g.: \`--alpha(red / 50%)\`]`,
    )
  })
})
// ... (1320 more lines)

Domain

Dependencies

Source

Frequently Asked Questions

What does css-functions.test.ts do?
css-functions.test.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the OxideEngine domain.
What does css-functions.test.ts depend on?
css-functions.test.ts imports 8 module(s): ., compileCss, node:path, optimizeCss, plugin.ts, promises, run.ts, vitest.
Where is css-functions.test.ts in the architecture?
css-functions.test.ts is located at packages/tailwindcss/src/css-functions.test.ts (domain: OxideEngine, directory: packages/tailwindcss/src).

Analyze Your Own Codebase

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

Try Supermodel Free