tailwindcss Architecture Docs
Home / File/ replace-shadow-colors.test.ts — tailwindcss Source File

replace-shadow-colors.test.ts — tailwindcss Source File

Architecture documentation for replace-shadow-colors.test.ts, a typescript file in the tailwindcss codebase. 5 imports, 0 dependents.

File typescript OxideEngine 5 imports

Entity Profile

Dependency Diagram

graph LR
  3aa2bab7_9691_50d5_6634_fb0c58dcd427["replace-shadow-colors.test.ts"]
  2bc6f8eb_6339_d09c_79df_e9025a479c97["utilities.ts"]
  3aa2bab7_9691_50d5_6634_fb0c58dcd427 --> 2bc6f8eb_6339_d09c_79df_e9025a479c97
  3f0c8c99_3ead_e51c_3ce2_4cae3716184f["replaceAlpha"]
  3aa2bab7_9691_50d5_6634_fb0c58dcd427 --> 3f0c8c99_3ead_e51c_3ce2_4cae3716184f
  fa53b0d6_dd5c_93d6_d0a9_732da934552f["replace-shadow-colors.ts"]
  3aa2bab7_9691_50d5_6634_fb0c58dcd427 --> fa53b0d6_dd5c_93d6_d0a9_732da934552f
  5bac8829_51ba_4cde_5b5b_16bf890de6ec["replaceShadowColors"]
  3aa2bab7_9691_50d5_6634_fb0c58dcd427 --> 5bac8829_51ba_4cde_5b5b_16bf890de6ec
  696bd648_5f24_1b59_8e8b_7a97a692869e["vitest"]
  3aa2bab7_9691_50d5_6634_fb0c58dcd427 --> 696bd648_5f24_1b59_8e8b_7a97a692869e
  style 3aa2bab7_9691_50d5_6634_fb0c58dcd427 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { describe, expect, it } from 'vitest'
import { replaceAlpha } from '../utilities'
import { replaceShadowColors } from './replace-shadow-colors'

describe('without replacer', () => {
  let replacer = (color: string) => `var(--tw-shadow-color, ${color})`

  it('should handle var shadow', () => {
    let parsed = replaceShadowColors('var(--my-shadow)', replacer)
    expect(parsed).toMatchInlineSnapshot(`"var(--my-shadow)"`)
  })

  it('should handle var shadow with offset', () => {
    let parsed = replaceShadowColors('1px var(--my-shadow)', replacer)
    expect(parsed).toMatchInlineSnapshot(`"1px var(--my-shadow)"`)
  })

  it('should handle var color with offsets', () => {
    let parsed = replaceShadowColors('1px 1px var(--my-color)', replacer)
    expect(parsed).toMatchInlineSnapshot(`"1px 1px var(--tw-shadow-color, var(--my-color))"`)
  })

  it('should handle var color with zero offsets', () => {
    let parsed = replaceShadowColors('0 0 0 var(--my-color)', replacer)
    expect(parsed).toMatchInlineSnapshot(`"0 0 0 var(--tw-shadow-color, var(--my-color))"`)
  })

  it('should handle two values with currentcolor', () => {
    let parsed = replaceShadowColors('1px 2px', replacer)
    expect(parsed).toMatchInlineSnapshot(`"1px 2px var(--tw-shadow-color, currentcolor)"`)
  })

  it('should handle three values with currentcolor', () => {
    let parsed = replaceShadowColors('1px 2px 3px', replacer)
    expect(parsed).toMatchInlineSnapshot(`"1px 2px 3px var(--tw-shadow-color, currentcolor)"`)
  })

  it('should handle four values with currentcolor', () => {
    let parsed = replaceShadowColors('1px 2px 3px 4px', replacer)
    expect(parsed).toMatchInlineSnapshot(`"1px 2px 3px 4px var(--tw-shadow-color, currentcolor)"`)
  })

  it('should handle multiple shadows', () => {
    let parsed = replaceShadowColors(
      ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
      replacer,
    )
    expect(parsed).toMatchInlineSnapshot(
      `"var(--my-shadow), 1px 1px var(--tw-shadow-color, var(--my-color)), 0 0 1px var(--tw-shadow-color, var(--my-color))"`,
    )
  })
})

describe('with replacer', () => {
  let replacer = (color: string) => `var(--tw-shadow-color, ${replaceAlpha(color, '50%')})`

  it('should handle var color with intensity', () => {
    let parsed = replaceShadowColors('1px 1px var(--my-color)', replacer)
    expect(parsed).toMatchInlineSnapshot(
      `"1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))"`,
    )
  })

  it('should handle box-shadow with intensity', () => {
    let parsed = replaceShadowColors('1px 1px var(--my-color)', replacer)
    expect(parsed).toMatchInlineSnapshot(
      `"1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))"`,
    )
  })

  it('should handle four values with intensity and no color value', () => {
    let parsed = replaceShadowColors('1px 2px 3px 4px', replacer)
    expect(parsed).toMatchInlineSnapshot(
      `"1px 2px 3px 4px var(--tw-shadow-color, oklab(from currentcolor l a b / 50%))"`,
    )
  })

  it('should handle multiple shadows with intensity', () => {
    let parsed = replaceShadowColors(
      ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
      replacer,
    )
    expect(parsed).toMatchInlineSnapshot(
      `"var(--my-shadow), 1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%)), 0 0 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))"`,
    )
  })
})

Domain

Dependencies

Source

Frequently Asked Questions

What does replace-shadow-colors.test.ts do?
replace-shadow-colors.test.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the OxideEngine domain.
What does replace-shadow-colors.test.ts depend on?
replace-shadow-colors.test.ts imports 5 module(s): replace-shadow-colors.ts, replaceAlpha, replaceShadowColors, utilities.ts, vitest.
Where is replace-shadow-colors.test.ts in the architecture?
replace-shadow-colors.test.ts is located at packages/tailwindcss/src/utils/replace-shadow-colors.test.ts (domain: OxideEngine, directory: packages/tailwindcss/src/utils).

Analyze Your Own Codebase

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

Try Supermodel Free