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 Oxide 8 imports

Entity Profile

Dependency Diagram

graph LR
  e11112c3_d23a_85a2_dc33_c31495d619bb["css-functions.test.ts"]
  914a5326_dcdd_e839_bbc4_d6545cf4c5d5["plugin.ts"]
  e11112c3_d23a_85a2_dc33_c31495d619bb --> 914a5326_dcdd_e839_bbc4_d6545cf4c5d5
  f9b7eac1_3b10_a208_408b_b98998a33868["run.ts"]
  e11112c3_d23a_85a2_dc33_c31495d619bb --> f9b7eac1_3b10_a208_408b_b98998a33868
  b8347223_2c86_b56c_bee4_53f1b5cc1312["compileCss"]
  e11112c3_d23a_85a2_dc33_c31495d619bb --> b8347223_2c86_b56c_bee4_53f1b5cc1312
  28c8c12b_7bfb_c956_c83b_681f0ac38ee2["optimizeCss"]
  e11112c3_d23a_85a2_dc33_c31495d619bb --> 28c8c12b_7bfb_c956_c83b_681f0ac38ee2
  b75e8457_6610_e7ce_eeaf_9a1dd10fc510["promises"]
  e11112c3_d23a_85a2_dc33_c31495d619bb --> b75e8457_6610_e7ce_eeaf_9a1dd10fc510
  89aef3dd_1eed_c141_d425_b8949215a653["node:path"]
  e11112c3_d23a_85a2_dc33_c31495d619bb --> 89aef3dd_1eed_c141_d425_b8949215a653
  f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3["vitest"]
  e11112c3_d23a_85a2_dc33_c31495d619bb --> f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3
  4a833a47_de88_b79a_24ac_de077593f60a["."]
  e11112c3_d23a_85a2_dc33_c31495d619bb --> 4a833a47_de88_b79a_24ac_de077593f60a
  style e11112c3_d23a_85a2_dc33_c31495d619bb 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 Oxide 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: 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