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 Oxide Scanner 6 imports 2 dependents 4 functions

Entity Profile

Oxide→ Scanner→ expand-declaration.ts — tailwindcss Source File

Dependency Diagram

graph LR
  8e85a534_6601_c513_9452_8a311dc16b8f["expand-declaration.ts"]
  b9cbffa4_c352_cf3c_268f_cbb174fb3a47["ast.ts"]
  8e85a534_6601_c513_9452_8a311dc16b8f --> b9cbffa4_c352_cf3c_268f_cbb174fb3a47
  1369a6dc_e395_347d_5d24_b88e22c5446d["decl"]
  8e85a534_6601_c513_9452_8a311dc16b8f --> 1369a6dc_e395_347d_5d24_b88e22c5446d
  f6c14bbb_2e42_58cc_18f1_c89a243da9c0["canonicalize-candidates.ts"]
  8e85a534_6601_c513_9452_8a311dc16b8f --> f6c14bbb_2e42_58cc_18f1_c89a243da9c0
  50a99d73_62da_41a0_ded6_5eee04decffb["SignatureFeatures"]
  8e85a534_6601_c513_9452_8a311dc16b8f --> 50a99d73_62da_41a0_ded6_5eee04decffb
  bb9924cc_8308_a1f9_0e30_76de45a64970["segment.ts"]
  8e85a534_6601_c513_9452_8a311dc16b8f --> bb9924cc_8308_a1f9_0e30_76de45a64970
  c58cbb33_f3cc_0b4f_844a_15bf66a1dc61["segment"]
  8e85a534_6601_c513_9452_8a311dc16b8f --> c58cbb33_f3cc_0b4f_844a_15bf66a1dc61
  f6c14bbb_2e42_58cc_18f1_c89a243da9c0["canonicalize-candidates.ts"]
  f6c14bbb_2e42_58cc_18f1_c89a243da9c0 --> 8e85a534_6601_c513_9452_8a311dc16b8f
  989dc85c_fd3b_d37b_10db_e189da171983["expand-declaration.test.ts"]
  989dc85c_fd3b_d37b_10db_e189da171983 --> 8e85a534_6601_c513_9452_8a311dc16b8f
  style 8e85a534_6601_c513_9452_8a311dc16b8f 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

Oxide

Subdomains

Scanner

Functions

Dependencies

Imported By

Source

View on GitHub

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 Oxide domain, Scanner 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: Oxide, subdomain: Scanner, directory: packages/tailwindcss/src).

Analyze Your Own Codebase

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

Try Supermodel Free