screens-config.test.ts — tailwindcss Source File

Architecture documentation for screens-config.test.ts, a typescript file in the tailwindcss codebase. 2 imports, 0 dependents.

File typescript 2 imports

Entity Profile

Dependency Diagram

graph LR
  5493ee33_3403_34a7_45b1_6f8d7638865a["screens-config.test.ts"]
  f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3["vitest"]
  5493ee33_3403_34a7_45b1_6f8d7638865a --> f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3
  9136f017_616b_a3c5_5967_4217d21e2fc8[".."]
  5493ee33_3403_34a7_45b1_6f8d7638865a --> 9136f017_616b_a3c5_5967_4217d21e2fc8
  style 5493ee33_3403_34a7_45b1_6f8d7638865a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { describe, expect, test } from 'vitest'
import { compile } from '..'

const css = String.raw

test('CSS `--breakpoint-*` merge with JS config `screens`', async () => {
  let input = css`
    @theme default {
      --breakpoint-sm: 40rem;
      --breakpoint-md: 48rem;
      --breakpoint-lg: 64rem;
      --breakpoint-xl: 80rem;
      --breakpoint-2xl: 96rem;
    }
    @theme {
      --breakpoint-md: 50rem;
    }
    @config "./config.js";
    @tailwind utilities;
  `

  let compiler = await compile(input, {
    loadModule: async () => ({
      module: {
        theme: {
          extend: {
            screens: {
              sm: '44rem',
            },
          },
        },
      },
      base: '/root',
      path: '',
    }),
  })

  expect(
    compiler.build([
      'sm:flex',
      'md:flex',
      'lg:flex',
      'min-sm:max-md:underline',
      'min-md:max-lg:underline',
      'max-w-screen-sm',
      // Ensure other core variants appear at the end
      'print:items-end',
    ]),
  ).toMatchInlineSnapshot(`
    ".max-w-screen-sm {
      max-width: 44rem;
    }
    .sm\\:flex {
      @media (width >= 44rem) {
        display: flex;
      }
    }
    .min-sm\\:max-md\\:underline {
      @media (width >= 44rem) {
        @media (width < 50rem) {
// ... (589 more lines)

Dependencies

..
vitest

Source

View on GitHub

Frequently Asked Questions

What does screens-config.test.ts do?

screens-config.test.ts is a source file in the tailwindcss codebase, written in typescript.

What does screens-config.test.ts depend on?

screens-config.test.ts imports 2 module(s): .., vitest.

Where is screens-config.test.ts in the architecture?

screens-config.test.ts is located at packages/tailwindcss/src/compat/screens-config.test.ts (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