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

css-functions.ts — tailwindcss Source File

Architecture documentation for css-functions.ts, a typescript file in the tailwindcss codebase. 11 imports, 3 dependents.

File typescript OxideEngine Extractor 11 imports 3 dependents 10 functions

Entity Profile

Dependency Diagram

graph LR
  2189e39a_5595_cbd9_3bbe_eaf87ccf42a2["css-functions.ts"]
  42640952_ea63_55f1_1ff1_00816e2980ae["ast.ts"]
  2189e39a_5595_cbd9_3bbe_eaf87ccf42a2 --> 42640952_ea63_55f1_1ff1_00816e2980ae
  7fd72d4c_e95c_d849_1002_1e1c9d8aca1a["design-system.ts"]
  2189e39a_5595_cbd9_3bbe_eaf87ccf42a2 --> 7fd72d4c_e95c_d849_1002_1e1c9d8aca1a
  2bc6f8eb_6339_d09c_79df_e9025a479c97["utilities.ts"]
  2189e39a_5595_cbd9_3bbe_eaf87ccf42a2 --> 2bc6f8eb_6339_d09c_79df_e9025a479c97
  b71e300f_d366_e92d_f71f_413f7ee24e95["withAlpha"]
  2189e39a_5595_cbd9_3bbe_eaf87ccf42a2 --> b71e300f_d366_e92d_f71f_413f7ee24e95
  ef204000_8998_5a6c_5455_324b37624713["segment.ts"]
  2189e39a_5595_cbd9_3bbe_eaf87ccf42a2 --> ef204000_8998_5a6c_5455_324b37624713
  f712ed47_45d4_4e5a_dd73_fdefa1da71da["segment"]
  2189e39a_5595_cbd9_3bbe_eaf87ccf42a2 --> f712ed47_45d4_4e5a_dd73_fdefa1da71da
  1d3f1613_f144_938f_08f7_49039a46ad49["value-parser.ts"]
  2189e39a_5595_cbd9_3bbe_eaf87ccf42a2 --> 1d3f1613_f144_938f_08f7_49039a46ad49
  d1b39b63_c9d5_6c28_0206_0ddc8b895876["walk.ts"]
  2189e39a_5595_cbd9_3bbe_eaf87ccf42a2 --> d1b39b63_c9d5_6c28_0206_0ddc8b895876
  ed78da58_8727_ad98_120c_61f35cea357a["walk"]
  2189e39a_5595_cbd9_3bbe_eaf87ccf42a2 --> ed78da58_8727_ad98_120c_61f35cea357a
  7b34c369_d799_30f1_b751_6e3fd5349f6b["WalkAction"]
  2189e39a_5595_cbd9_3bbe_eaf87ccf42a2 --> 7b34c369_d799_30f1_b751_6e3fd5349f6b
  901927f2_bc06_7bba_3b59_6521372af070["."]
  2189e39a_5595_cbd9_3bbe_eaf87ccf42a2 --> 901927f2_bc06_7bba_3b59_6521372af070
  af1a6ece_0432_a556_fd63_8cb4a91f12ad["plugin-api.ts"]
  af1a6ece_0432_a556_fd63_8cb4a91f12ad --> 2189e39a_5595_cbd9_3bbe_eaf87ccf42a2
  7fd72d4c_e95c_d849_1002_1e1c9d8aca1a["design-system.ts"]
  7fd72d4c_e95c_d849_1002_1e1c9d8aca1a --> 2189e39a_5595_cbd9_3bbe_eaf87ccf42a2
  5af9cd3c_2cf4_9dee_376e_fc39122d865a["index.ts"]
  5af9cd3c_2cf4_9dee_376e_fc39122d865a --> 2189e39a_5595_cbd9_3bbe_eaf87ccf42a2
  style 2189e39a_5595_cbd9_3bbe_eaf87ccf42a2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { Features } from '.'
import { type AstNode } from './ast'
import type { DesignSystem } from './design-system'
import { withAlpha } from './utilities'
import { segment } from './utils/segment'
import * as ValueParser from './value-parser'
import { walk, WalkAction } from './walk'

const CSS_FUNCTIONS: Record<
  string,
  (designSystem: DesignSystem, source: AstNode, ...args: string[]) => string
> = {
  '--alpha': alpha,
  '--spacing': spacing,
  '--theme': theme,
  theme: legacyTheme,
}

function alpha(
  _designSystem: DesignSystem,
  _source: AstNode,
  value: string,
  ...rest: string[]
): string {
  let [color, alpha] = segment(value, '/').map((v) => v.trim())

  if (!color || !alpha) {
    throw new Error(
      `The --alpha(…) function requires a color and an alpha value, e.g.: \`--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})\``,
    )
  }

  if (rest.length > 0) {
    throw new Error(
      `The --alpha(…) function only accepts one argument, e.g.: \`--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})\``,
    )
  }

  return withAlpha(color, alpha)
}

function spacing(
  designSystem: DesignSystem,
  _source: AstNode,
  value: string,
  ...rest: string[]
): string {
  if (!value) {
    throw new Error(`The --spacing(…) function requires an argument, but received none.`)
  }

  if (rest.length > 0) {
    throw new Error(
      `The --spacing(…) function only accepts a single argument, but received ${rest.length + 1}.`,
    )
  }

  let multiplier = designSystem.theme.resolve(null, ['--spacing'])
  if (!multiplier) {
    throw new Error(
// ... (184 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does css-functions.ts do?
css-functions.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the OxideEngine domain, Extractor subdomain.
What functions are defined in css-functions.ts?
css-functions.ts defines 10 function(s): THEME_FUNCTION_INVOCATION, alpha, designSystem, eventuallyUnquote, injectFallbackForInitialFallback, legacyTheme, spacing, substituteFunctions, substituteFunctionsInValue, theme.
What does css-functions.ts depend on?
css-functions.ts imports 11 module(s): ., WalkAction, ast.ts, design-system.ts, segment, segment.ts, utilities.ts, value-parser.ts, and 3 more.
What files import css-functions.ts?
css-functions.ts is imported by 3 file(s): design-system.ts, index.ts, plugin-api.ts.
Where is css-functions.ts in the architecture?
css-functions.ts is located at packages/tailwindcss/src/css-functions.ts (domain: OxideEngine, 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