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 Oxide 5 imports

Entity Profile

Dependency Diagram

graph LR
  5137203f_bfa9_d8df_2dab_017f40b22bfc["replace-shadow-colors.test.ts"]
  ffde8eb7_7def_91ee_918c_be4f250f76a2["utilities.ts"]
  5137203f_bfa9_d8df_2dab_017f40b22bfc --> ffde8eb7_7def_91ee_918c_be4f250f76a2
  c9298b5e_9901_b387_90f5_20565f550298["replaceAlpha"]
  5137203f_bfa9_d8df_2dab_017f40b22bfc --> c9298b5e_9901_b387_90f5_20565f550298
  5b848d60_40d3_e198_b396_38cb0e6eeec4["replace-shadow-colors.ts"]
  5137203f_bfa9_d8df_2dab_017f40b22bfc --> 5b848d60_40d3_e198_b396_38cb0e6eeec4
  da3c2484_686d_b298_523c_750c3035414c["replaceShadowColors"]
  5137203f_bfa9_d8df_2dab_017f40b22bfc --> da3c2484_686d_b298_523c_750c3035414c
  f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3["vitest"]
  5137203f_bfa9_d8df_2dab_017f40b22bfc --> f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3
  style 5137203f_bfa9_d8df_2dab_017f40b22bfc 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 Oxide 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: Oxide, 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