migrate-automatic-var-injection.test.ts — tailwindcss Source File

Architecture documentation for migrate-automatic-var-injection.test.ts, a typescript file in the tailwindcss codebase. 4 imports, 0 dependents.

File typescript UpgradeToolkit 4 imports

Entity Profile

UpgradeToolkit→ migrate-automatic-var-injection.test.ts — tailwindcss Source File

Dependency Diagram

graph LR
  8a408602_eeed_cb31_ce6b_b112c205dc45["migrate-automatic-var-injection.test.ts"]
  d475bcf1_b109_d714_cc32_55d5655282ec["migrate-automatic-var-injection.ts"]
  8a408602_eeed_cb31_ce6b_b112c205dc45 --> d475bcf1_b109_d714_cc32_55d5655282ec
  aeb7589b_9d5b_312e_4558_4df754cbb905["migrateAutomaticVarInjection"]
  8a408602_eeed_cb31_ce6b_b112c205dc45 --> aeb7589b_9d5b_312e_4558_4df754cbb905
  92f2d961_72a4_d195_92d7_2e66972f8894["node"]
  8a408602_eeed_cb31_ce6b_b112c205dc45 --> 92f2d961_72a4_d195_92d7_2e66972f8894
  696bd648_5f24_1b59_8e8b_7a97a692869e["vitest"]
  8a408602_eeed_cb31_ce6b_b112c205dc45 --> 696bd648_5f24_1b59_8e8b_7a97a692869e
  style 8a408602_eeed_cb31_ce6b_b112c205dc45 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { __unstable__loadDesignSystem } from '@tailwindcss/node'
import { expect, test } from 'vitest'
import { migrateAutomaticVarInjection } from './migrate-automatic-var-injection'

test.each([
  // Arbitrary candidates
  ['[color:--my-color]', '[color:var(--my-color)]'],
  ['[--my-color:red]', '[--my-color:red]'],
  ['[--my-color:--my-other-color]', '[--my-color:var(--my-other-color)]'],

  // Arbitrary values for functional candidates
  ['bg-[--my-color]', 'bg-(--my-color)'],
  ['bg-[color:--my-color]', 'bg-(color:--my-color)'],
  ['border-[length:--my-length]', 'border-(length:--my-length)'],
  ['border-[line-width:--my-width]', 'border-(line-width:--my-width)'],

  // Can clean up the workaround for opting out of automatic var injection
  ['bg-[_--my-color]', 'bg-[--my-color]'],
  ['bg-[color:_--my-color]', 'bg-[color:--my-color]'],
  ['border-[length:_--my-length]', 'border-[length:--my-length]'],
  ['border-[line-width:_--my-width]', 'border-[line-width:--my-width]'],

  // Modifiers
  ['[color:--my-color]/[--my-opacity]', '[color:var(--my-color)]/(--my-opacity)'],
  ['bg-red-500/[--my-opacity]', 'bg-red-500/(--my-opacity)'],
  ['bg-[--my-color]/[--my-opacity]', 'bg-(--my-color)/(--my-opacity)'],
  ['bg-[color:--my-color]/[--my-opacity]', 'bg-(color:--my-color)/(--my-opacity)'],

  // Can clean up the workaround for opting out of automatic var injection
  ['[color:--my-color]/[_--my-opacity]', '[color:var(--my-color)]/[--my-opacity]'],
  ['bg-red-500/[_--my-opacity]', 'bg-red-500/[--my-opacity]'],
  ['bg-[--my-color]/[_--my-opacity]', 'bg-(--my-color)/[--my-opacity]'],
  ['bg-[color:--my-color]/[_--my-opacity]', 'bg-(color:--my-color)/[--my-opacity]'],

  // Variants
  ['supports-[--test]:flex', 'supports-(--test):flex'],
  ['supports-[_--test]:flex', 'supports-[--test]:flex'],

  // Custom CSS functions that look like variables should not be converted
  ['w-[--spacing(5)]', 'w-[--spacing(5)]'],
  ['bg-[--theme(--color-red-500)]', 'bg-[--theme(--color-red-500)]'],

  // Fallback values should be included inside the `var(…)` function
  ['bg-[--my-color,red]', 'bg-(--my-color,red)'],
  // Fallback values can contain CSS functions
  ['bg-[--my-color,theme(spacing.1)]', 'bg-(--my-color,theme(spacing.1))'],

  // Some properties never had var() injection in v3.
  ['[scroll-timeline-name:--myTimeline]', '[scroll-timeline-name:--myTimeline]'],
  ['[timeline-scope:--myScope]', '[timeline-scope:--myScope]'],
  ['[view-timeline-name:--myTimeline]', '[view-timeline-name:--myTimeline]'],
  ['[font-palette:--myPalette]', '[font-palette:--myPalette]'],
  ['[anchor-name:--myAnchor]', '[anchor-name:--myAnchor]'],
  ['[anchor-scope:--myScope]', '[anchor-scope:--myScope]'],
  ['[position-anchor:--myAnchor]', '[position-anchor:--myAnchor]'],
  ['[position-try-options:--myAnchor]', '[position-try-options:--myAnchor]'],
  ['[scroll-timeline:--myTimeline]', '[scroll-timeline:--myTimeline]'],
  ['[animation-timeline:--myAnimation]', '[animation-timeline:--myAnimation]'],
  ['[view-timeline:--myTimeline]', '[view-timeline:--myTimeline]'],
  ['[position-try:--myAnchor]', '[position-try:--myAnchor]'],
])('%s => %s', async (candidate, result) => {
  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
    base: __dirname,
  })

  let migrated = migrateAutomaticVarInjection(designSystem, {}, candidate)
  expect(migrated).toEqual(result)
})

Domain

UpgradeToolkit

Dependencies

Source

View on GitHub

Frequently Asked Questions

What does migrate-automatic-var-injection.test.ts do?

migrate-automatic-var-injection.test.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the UpgradeToolkit domain.

What does migrate-automatic-var-injection.test.ts depend on?

migrate-automatic-var-injection.test.ts imports 4 module(s): migrate-automatic-var-injection.ts, migrateAutomaticVarInjection, node, vitest.

Where is migrate-automatic-var-injection.test.ts in the architecture?

migrate-automatic-var-injection.test.ts is located at packages/@tailwindcss-upgrade/src/codemods/template/migrate-automatic-var-injection.test.ts (domain: UpgradeToolkit, directory: packages/@tailwindcss-upgrade/src/codemods/template).

Analyze Your Own Codebase

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

Try Supermodel Free