tailwindcss Architecture Docs
Home / File/ important.test.ts — tailwindcss Source File

important.test.ts — tailwindcss Source File

Architecture documentation for important.test.ts, a typescript file in the tailwindcss codebase. 4 imports, 0 dependents.

File typescript OxideEngine 4 imports

Entity Profile

Dependency Diagram

graph LR
  49da1c5b_8c4c_8a9e_08d9_aef036e4d864["important.test.ts"]
  cf14281b_29d9_c059_3148_2e2cc2fe19ae["run.ts"]
  49da1c5b_8c4c_8a9e_08d9_aef036e4d864 --> cf14281b_29d9_c059_3148_2e2cc2fe19ae
  4c014585_4ec9_378c_bc1a_9d4ad5c2708c["compileCss"]
  49da1c5b_8c4c_8a9e_08d9_aef036e4d864 --> 4c014585_4ec9_378c_bc1a_9d4ad5c2708c
  696bd648_5f24_1b59_8e8b_7a97a692869e["vitest"]
  49da1c5b_8c4c_8a9e_08d9_aef036e4d864 --> 696bd648_5f24_1b59_8e8b_7a97a692869e
  901927f2_bc06_7bba_3b59_6521372af070["."]
  49da1c5b_8c4c_8a9e_08d9_aef036e4d864 --> 901927f2_bc06_7bba_3b59_6521372af070
  style 49da1c5b_8c4c_8a9e_08d9_aef036e4d864 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { expect, test } from 'vitest'
import { compile } from '.'
import { compileCss } from './test-utils/run'

const css = String.raw

test('Utilities can be wrapped in a selector', async () => {
  // This is the v4 equivalent of `important: "#app"` from v3
  let input = css`
    #app {
      @tailwind utilities;
    }
  `

  let compiler = await compile(input)

  expect(compiler.build(['underline', 'hover:line-through'])).toMatchInlineSnapshot(`
    "#app {
      .underline {
        text-decoration-line: underline;
      }
      .hover\\:line-through {
        &:hover {
          @media (hover: hover) {
            text-decoration-line: line-through;
          }
        }
      }
    }
    "
  `)
})

test('Utilities can be marked with important', async () => {
  // This is the v4 equivalent of `important: true` from v3
  let input = css`
    @import 'tailwindcss/utilities' important;
  `

  let compiler = await compile(input, {
    loadStylesheet: async (id: string, base: string) => ({
      base,
      content: '@tailwind utilities;',
      path: '',
    }),
  })

  expect(compiler.build(['underline', 'hover:line-through'])).toMatchInlineSnapshot(`
    ".underline {
      text-decoration-line: underline !important;
    }
    .hover\\:line-through {
      &:hover {
        @media (hover: hover) {
          text-decoration-line: line-through !important;
        }
      }
    }
    "
  `)
// ... (72 more lines)

Domain

Dependencies

Source

Frequently Asked Questions

What does important.test.ts do?
important.test.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the OxideEngine domain.
What does important.test.ts depend on?
important.test.ts imports 4 module(s): ., compileCss, run.ts, vitest.
Where is important.test.ts in the architecture?
important.test.ts is located at packages/tailwindcss/src/important.test.ts (domain: OxideEngine, directory: packages/tailwindcss/src).

Analyze Your Own Codebase

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

Try Supermodel Free