tailwindcss Architecture Docs
Home / File/ apply-keyframes-to-theme.test.ts — tailwindcss Source File

apply-keyframes-to-theme.test.ts — tailwindcss Source File

Architecture documentation for apply-keyframes-to-theme.test.ts, a typescript file in the tailwindcss codebase. 14 imports, 0 dependents.

File typescript Oxide 14 imports

Entity Profile

Dependency Diagram

graph LR
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61["apply-keyframes-to-theme.test.ts"]
  b9cbffa4_c352_cf3c_268f_cbb174fb3a47["ast.ts"]
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61 --> b9cbffa4_c352_cf3c_268f_cbb174fb3a47
  2f6881be_62d9_4b96_7331_a962ced095f7["atRule"]
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61 --> 2f6881be_62d9_4b96_7331_a962ced095f7
  1369a6dc_e395_347d_5d24_b88e22c5446d["decl"]
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61 --> 1369a6dc_e395_347d_5d24_b88e22c5446d
  2a22052d_f868_4f88_0a03_2033be58172d["styleRule"]
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61 --> 2a22052d_f868_4f88_0a03_2033be58172d
  9b49f3c6_0c8d_5c62_965c_30a1db6499f8["toCss"]
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61 --> 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  bdedd2f6_da4b_69dc_e990_0814b59fbe6e["design-system.ts"]
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61 --> bdedd2f6_da4b_69dc_e990_0814b59fbe6e
  e557c8a4_bb27_ee44_c462_9e238157ad04["buildDesignSystem"]
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61 --> e557c8a4_bb27_ee44_c462_9e238157ad04
  e28cd4a7_4e1a_e79b_76f1_86c479c6640d["theme.ts"]
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61 --> e28cd4a7_4e1a_e79b_76f1_86c479c6640d
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2["Theme"]
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61 --> e7a2e966_188e_28f5_d9d6_e54e27e0d0f2
  c366ff81_32f3_ab43_fb66_6ea38913c09a["apply-keyframes-to-theme.ts"]
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61 --> c366ff81_32f3_ab43_fb66_6ea38913c09a
  a45cd70e_7ade_035c_2c52_6b1daff60f01["applyKeyframesToTheme"]
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61 --> a45cd70e_7ade_035c_2c52_6b1daff60f01
  cad44155_17aa_e1d6_081a_8f3b4f06bcde["resolve-config.ts"]
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61 --> cad44155_17aa_e1d6_081a_8f3b4f06bcde
  bc7b25d3_d5ad_3609_d595_c9755dfadcbb["resolveConfig"]
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61 --> bc7b25d3_d5ad_3609_d595_c9755dfadcbb
  f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3["vitest"]
  941f96f9_7e58_b2b3_cebb_9e3b8be15d61 --> f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3
  style 941f96f9_7e58_b2b3_cebb_9e3b8be15d61 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { expect, test } from 'vitest'
import { atRule, decl, styleRule, toCss } from '../ast'
import { buildDesignSystem } from '../design-system'
import { Theme } from '../theme'
import { applyKeyframesToTheme } from './apply-keyframes-to-theme'
import { resolveConfig } from './config/resolve-config'

test('keyframes can be merged into the theme', () => {
  let theme = new Theme()
  let design = buildDesignSystem(theme)

  let { resolvedConfig } = resolveConfig(design, [
    {
      config: {
        theme: {
          extend: {
            keyframes: {
              'fade-in': {
                '0%': { opacity: '0' },
                '100%': { opacity: '1' },
              },
              'fade-out': {
                '0%': { opacity: '1' },
                '100%': { opacity: '0' },
              },
            },
          },
        },
      },
      base: '/root',
      reference: false,
      src: undefined,
    },
  ])
  applyKeyframesToTheme(design, resolvedConfig)

  expect(toCss(design.theme.getKeyframes())).toMatchInlineSnapshot(`
    "@keyframes fade-in {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade-out {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
    "
  `)
})

test('will append to the default keyframes with new keyframes', () => {
  let theme = new Theme()
  let design = buildDesignSystem(theme)
// ... (78 more lines)

Domain

Dependencies

Source

Frequently Asked Questions

What does apply-keyframes-to-theme.test.ts do?
apply-keyframes-to-theme.test.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the Oxide domain.
What does apply-keyframes-to-theme.test.ts depend on?
apply-keyframes-to-theme.test.ts imports 14 module(s): Theme, apply-keyframes-to-theme.ts, applyKeyframesToTheme, ast.ts, atRule, buildDesignSystem, decl, design-system.ts, and 6 more.
Where is apply-keyframes-to-theme.test.ts in the architecture?
apply-keyframes-to-theme.test.ts is located at packages/tailwindcss/src/compat/apply-keyframes-to-theme.test.ts (domain: Oxide, directory: packages/tailwindcss/src/compat).

Analyze Your Own Codebase

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

Try Supermodel Free