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 OxideEngine 14 imports

Entity Profile

Dependency Diagram

graph LR
  5db58d87_3ee6_4def_7cfe_374d0849ecb5["apply-keyframes-to-theme.test.ts"]
  42640952_ea63_55f1_1ff1_00816e2980ae["ast.ts"]
  5db58d87_3ee6_4def_7cfe_374d0849ecb5 --> 42640952_ea63_55f1_1ff1_00816e2980ae
  f9b19679_c1f0_28d6_4d1a_31a10c52e42d["atRule"]
  5db58d87_3ee6_4def_7cfe_374d0849ecb5 --> f9b19679_c1f0_28d6_4d1a_31a10c52e42d
  c203f636_607a_d332_b4c5_6a40c108f778["decl"]
  5db58d87_3ee6_4def_7cfe_374d0849ecb5 --> c203f636_607a_d332_b4c5_6a40c108f778
  36be1773_d660_31ac_0b0b_88dbd7f6f7a8["styleRule"]
  5db58d87_3ee6_4def_7cfe_374d0849ecb5 --> 36be1773_d660_31ac_0b0b_88dbd7f6f7a8
  2da63033_d079_7b37_5cfb_3877674a70b9["toCss"]
  5db58d87_3ee6_4def_7cfe_374d0849ecb5 --> 2da63033_d079_7b37_5cfb_3877674a70b9
  7fd72d4c_e95c_d849_1002_1e1c9d8aca1a["design-system.ts"]
  5db58d87_3ee6_4def_7cfe_374d0849ecb5 --> 7fd72d4c_e95c_d849_1002_1e1c9d8aca1a
  9b965fd7_d8e9_0b43_cd5d_c9294ab598ed["buildDesignSystem"]
  5db58d87_3ee6_4def_7cfe_374d0849ecb5 --> 9b965fd7_d8e9_0b43_cd5d_c9294ab598ed
  80295787_127f_69e6_91b3_4bea3a484544["theme.ts"]
  5db58d87_3ee6_4def_7cfe_374d0849ecb5 --> 80295787_127f_69e6_91b3_4bea3a484544
  734cf7ec_fb2a_2532_7b20_b3a815c7e3e6["Theme"]
  5db58d87_3ee6_4def_7cfe_374d0849ecb5 --> 734cf7ec_fb2a_2532_7b20_b3a815c7e3e6
  0620c0e4_5f2c_149b_94e3_e0fed99b95d8["apply-keyframes-to-theme.ts"]
  5db58d87_3ee6_4def_7cfe_374d0849ecb5 --> 0620c0e4_5f2c_149b_94e3_e0fed99b95d8
  f127b5d6_5f88_398b_8c62_d6852f4e9748["applyKeyframesToTheme"]
  5db58d87_3ee6_4def_7cfe_374d0849ecb5 --> f127b5d6_5f88_398b_8c62_d6852f4e9748
  9b5d2e3d_392e_c654_c350_1352ed70f5e8["resolve-config.ts"]
  5db58d87_3ee6_4def_7cfe_374d0849ecb5 --> 9b5d2e3d_392e_c654_c350_1352ed70f5e8
  0ed24ba5_7c39_3f5a_fdbb_f973a617a172["resolveConfig"]
  5db58d87_3ee6_4def_7cfe_374d0849ecb5 --> 0ed24ba5_7c39_3f5a_fdbb_f973a617a172
  696bd648_5f24_1b59_8e8b_7a97a692869e["vitest"]
  5db58d87_3ee6_4def_7cfe_374d0849ecb5 --> 696bd648_5f24_1b59_8e8b_7a97a692869e
  style 5db58d87_3ee6_4def_7cfe_374d0849ecb5 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 OxideEngine 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: OxideEngine, 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