tailwindcss Architecture Docs
Home / File/ expand-declaration.ts — tailwindcss Source File

expand-declaration.ts — tailwindcss Source File

Architecture documentation for expand-declaration.ts, a typescript file in the tailwindcss codebase. 6 imports, 2 dependents.

File typescript OxideEngine Extractor 6 imports 2 dependents 4 functions

Entity Profile

Dependency Diagram

graph LR
  6ad94eb5_5050_c104_6930_f586671c39b4["expand-declaration.ts"]
  42640952_ea63_55f1_1ff1_00816e2980ae["ast.ts"]
  6ad94eb5_5050_c104_6930_f586671c39b4 --> 42640952_ea63_55f1_1ff1_00816e2980ae
  c203f636_607a_d332_b4c5_6a40c108f778["decl"]
  6ad94eb5_5050_c104_6930_f586671c39b4 --> c203f636_607a_d332_b4c5_6a40c108f778
  7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e["canonicalize-candidates.ts"]
  6ad94eb5_5050_c104_6930_f586671c39b4 --> 7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e
  947e7889_6e74_3c2d_252b_f7030e7c14e0["SignatureFeatures"]
  6ad94eb5_5050_c104_6930_f586671c39b4 --> 947e7889_6e74_3c2d_252b_f7030e7c14e0
  ef204000_8998_5a6c_5455_324b37624713["segment.ts"]
  6ad94eb5_5050_c104_6930_f586671c39b4 --> ef204000_8998_5a6c_5455_324b37624713
  f712ed47_45d4_4e5a_dd73_fdefa1da71da["segment"]
  6ad94eb5_5050_c104_6930_f586671c39b4 --> f712ed47_45d4_4e5a_dd73_fdefa1da71da
  7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e["canonicalize-candidates.ts"]
  7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e --> 6ad94eb5_5050_c104_6930_f586671c39b4
  2aa0c849_e1bd_ca62_e1ac_c91753e5c84e["expand-declaration.test.ts"]
  2aa0c849_e1bd_ca62_e1ac_c91753e5c84e --> 6ad94eb5_5050_c104_6930_f586671c39b4
  style 6ad94eb5_5050_c104_6930_f586671c39b4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { decl, type AstNode } from './ast'
import { SignatureFeatures } from './canonicalize-candidates'
import { segment } from './utils/segment'

function createPrefixedQuad(
  prefix: string,
  t = 'top',
  r = 'right',
  b = 'bottom',
  l = 'left',
): Record<number, [prop: string, index: number][]> {
  return createBareQuad(`${prefix}-${t}`, `${prefix}-${r}`, `${prefix}-${b}`, `${prefix}-${l}`)
}

// prettier-ignore
function createBareQuad(t = 'top', r = 'right', b = 'bottom', l = 'left'): Record<number, [prop: string, index: number][]> {
  return {
    1: [[t, 0], [r, 0], [b, 0], [l, 0]],
    2: [[t, 0], [r, 1], [b, 0], [l, 1]],
    3: [[t, 0], [r, 1], [b, 2], [l, 1]],
    4: [[t, 0], [r, 1], [b, 2], [l, 3]],
  } as const;
}

// prettier-ignore
function createPair(lhs: string, rhs: string): Record<number, [prop: string, index: number][]> {
  return {
    1: [[lhs, 0], [rhs, 0]],
    2: [[lhs, 0], [rhs, 1]],
  } as const;
}

// Depending on the length of the value, map to different properties
let VARIADIC_EXPANSION_MAP: Record<string, Record<number, [prop: string, index: number][]>> = {
  inset: createBareQuad(),
  margin: createPrefixedQuad('margin'),
  padding: createPrefixedQuad('padding'),
  gap: createPair('row-gap', 'column-gap'),
}

// Depending on the length of the value, map to different properties
let VARIADIC_LOGICAL_EXPANSION_MAP: Record<
  string,
  Record<number, [prop: string, index: number][]>
> = {
  'inset-block': createPair('top', 'bottom'),
  'inset-inline': createPair('left', 'right'),
  'margin-block': createPair('margin-top', 'margin-bottom'),
  'margin-inline': createPair('margin-left', 'margin-right'),
  'padding-block': createPair('padding-top', 'padding-bottom'),
  'padding-inline': createPair('padding-left', 'padding-right'),
}

// The entire value is mapped to each property
let LOGICAL_EXPANSION_MAP: Record<string, string[]> = {
  'border-block': ['border-bottom', 'border-top'],
  'border-block-color': ['border-bottom-color', 'border-top-color'],
  'border-block-style': ['border-bottom-style', 'border-top-style'],
  'border-block-width': ['border-bottom-width', 'border-top-width'],
  'border-inline': ['border-left', 'border-right'],
  'border-inline-color': ['border-left-color', 'border-right-color'],
  'border-inline-style': ['border-left-style', 'border-right-style'],
  'border-inline-width': ['border-left-width', 'border-right-width'],
}

export function expandDeclaration(
  node: Extract<AstNode, { kind: 'declaration' }>,
  options: SignatureFeatures,
): AstNode[] | null {
  if (options & SignatureFeatures.LogicalToPhysical) {
    if (node.property in VARIADIC_LOGICAL_EXPANSION_MAP) {
      let args = segment(node.value!, ' ')
      return VARIADIC_LOGICAL_EXPANSION_MAP[node.property][args.length]?.map(([prop, index]) => {
        return decl(prop, args[index], node.important)
      })
    }

    if (node.property in LOGICAL_EXPANSION_MAP) {
      return LOGICAL_EXPANSION_MAP[node.property]?.map((prop) => {
        return decl(prop, node.value!, node.important)
      })
    }
  }

  if (node.property in VARIADIC_EXPANSION_MAP) {
    let args = segment(node.value!, ' ')
    return VARIADIC_EXPANSION_MAP[node.property][args.length]?.map(([prop, index]) => {
      return decl(prop, args[index], node.important)
    })
  }

  return null
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does expand-declaration.ts do?
expand-declaration.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 expand-declaration.ts?
expand-declaration.ts defines 4 function(s): createBareQuad, createPair, createPrefixedQuad, expandDeclaration.
What does expand-declaration.ts depend on?
expand-declaration.ts imports 6 module(s): SignatureFeatures, ast.ts, canonicalize-candidates.ts, decl, segment, segment.ts.
What files import expand-declaration.ts?
expand-declaration.ts is imported by 2 file(s): canonicalize-candidates.ts, expand-declaration.test.ts.
Where is expand-declaration.ts in the architecture?
expand-declaration.ts is located at packages/tailwindcss/src/expand-declaration.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