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
  65210d18_d2e5_4ba4_ba8f_371dea1db3c6["screens-config.test.ts"]
  696bd648_5f24_1b59_8e8b_7a97a692869e["vitest"]
  65210d18_d2e5_4ba4_ba8f_371dea1db3c6 --> 696bd648_5f24_1b59_8e8b_7a97a692869e
  defe3085_cb6b_a1e5_b72d_c90fcb3dd3f2[".."]
  65210d18_d2e5_4ba4_ba8f_371dea1db3c6 --> defe3085_cb6b_a1e5_b72d_c90fcb3dd3f2
  style 65210d18_d2e5_4ba4_ba8f_371dea1db3c6 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