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. 12 imports, 3 dependents.

File typescript Oxide PreProcessors 12 imports 3 dependents 10 functions

Entity Profile

Dependency Diagram

graph LR
  1648a493_13b2_8170_f86b_607e088d9565["css-functions.ts"]
  b9cbffa4_c352_cf3c_268f_cbb174fb3a47["ast.ts"]
  1648a493_13b2_8170_f86b_607e088d9565 --> b9cbffa4_c352_cf3c_268f_cbb174fb3a47
  bdedd2f6_da4b_69dc_e990_0814b59fbe6e["design-system.ts"]
  1648a493_13b2_8170_f86b_607e088d9565 --> bdedd2f6_da4b_69dc_e990_0814b59fbe6e
  665aa4ed_d86e_30e5_80d5_cd56b8ca8b62["DesignSystem"]
  1648a493_13b2_8170_f86b_607e088d9565 --> 665aa4ed_d86e_30e5_80d5_cd56b8ca8b62
  ffde8eb7_7def_91ee_918c_be4f250f76a2["utilities.ts"]
  1648a493_13b2_8170_f86b_607e088d9565 --> ffde8eb7_7def_91ee_918c_be4f250f76a2
  2e8f6051_b6e8_4985_14e1_e11717a8d2ab["withAlpha"]
  1648a493_13b2_8170_f86b_607e088d9565 --> 2e8f6051_b6e8_4985_14e1_e11717a8d2ab
  bb9924cc_8308_a1f9_0e30_76de45a64970["segment.ts"]
  1648a493_13b2_8170_f86b_607e088d9565 --> bb9924cc_8308_a1f9_0e30_76de45a64970
  c58cbb33_f3cc_0b4f_844a_15bf66a1dc61["segment"]
  1648a493_13b2_8170_f86b_607e088d9565 --> c58cbb33_f3cc_0b4f_844a_15bf66a1dc61
  d9175aea_5971_a6c1_773d_004ce3789372["value-parser.ts"]
  1648a493_13b2_8170_f86b_607e088d9565 --> d9175aea_5971_a6c1_773d_004ce3789372
  1b8f1c54_b1e9_e18d_0719_b7ad92808185["walk.ts"]
  1648a493_13b2_8170_f86b_607e088d9565 --> 1b8f1c54_b1e9_e18d_0719_b7ad92808185
  4982d9ce_98d4_85d9_44af_7cc47b93c482["walk"]
  1648a493_13b2_8170_f86b_607e088d9565 --> 4982d9ce_98d4_85d9_44af_7cc47b93c482
  47187d1b_a6f7_f734_0752_446b87b5cd9e["WalkAction"]
  1648a493_13b2_8170_f86b_607e088d9565 --> 47187d1b_a6f7_f734_0752_446b87b5cd9e
  4a833a47_de88_b79a_24ac_de077593f60a["."]
  1648a493_13b2_8170_f86b_607e088d9565 --> 4a833a47_de88_b79a_24ac_de077593f60a
  da5d1116_ab2a_437a_6b13_c1429fd546fa["plugin-api.ts"]
  da5d1116_ab2a_437a_6b13_c1429fd546fa --> 1648a493_13b2_8170_f86b_607e088d9565
  bdedd2f6_da4b_69dc_e990_0814b59fbe6e["design-system.ts"]
  bdedd2f6_da4b_69dc_e990_0814b59fbe6e --> 1648a493_13b2_8170_f86b_607e088d9565
  23bd4e2f_c62c_a942_7014_8486569053ee["index.ts"]
  23bd4e2f_c62c_a942_7014_8486569053ee --> 1648a493_13b2_8170_f86b_607e088d9565
  style 1648a493_13b2_8170_f86b_607e088d9565 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 Oxide domain, PreProcessors 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 12 module(s): ., DesignSystem, WalkAction, ast.ts, design-system.ts, segment, segment.ts, utilities.ts, and 4 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: Oxide, subdomain: PreProcessors, directory: packages/tailwindcss/src).

Analyze Your Own Codebase

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

Try Supermodel Free