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

ast.test.ts — tailwindcss Source File

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

File typescript PostCSSPlugin 10 imports

Entity Profile

Dependency Diagram

graph LR
  85ba2ac2_aa8c_15cb_ed3c_011dc66339d7["ast.test.ts"]
  b9cbffa4_c352_cf3c_268f_cbb174fb3a47["ast.ts"]
  85ba2ac2_aa8c_15cb_ed3c_011dc66339d7 --> b9cbffa4_c352_cf3c_268f_cbb174fb3a47
  9b49f3c6_0c8d_5c62_965c_30a1db6499f8["toCss"]
  85ba2ac2_aa8c_15cb_ed3c_011dc66339d7 --> 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  8be42ab2_7e92_957a_da93_ffe4c7d161fe["css-parser.ts"]
  85ba2ac2_aa8c_15cb_ed3c_011dc66339d7 --> 8be42ab2_7e92_957a_da93_ffe4c7d161fe
  9d7d664d_b6fd_88fd_8800_4b530c33a95b["parse"]
  85ba2ac2_aa8c_15cb_ed3c_011dc66339d7 --> 9d7d664d_b6fd_88fd_8800_4b530c33a95b
  9106ed35_a5a8_5f41_7f5e_a6fe5287f68d["ast.ts"]
  85ba2ac2_aa8c_15cb_ed3c_011dc66339d7 --> 9106ed35_a5a8_5f41_7f5e_a6fe5287f68d
  dea2012d_fe14_a673_2ce4_701a84a75cdb["cssAstToPostCssAst"]
  85ba2ac2_aa8c_15cb_ed3c_011dc66339d7 --> dea2012d_fe14_a673_2ce4_701a84a75cdb
  63cea7e8_6a82_90d2_b2b0_c166362f218b["postCssAstToCssAst"]
  85ba2ac2_aa8c_15cb_ed3c_011dc66339d7 --> 63cea7e8_6a82_90d2_b2b0_c166362f218b
  8ff4bb92_b963_efb6_cca2_1da4b3ea849b["dedent"]
  85ba2ac2_aa8c_15cb_ed3c_011dc66339d7 --> 8ff4bb92_b963_efb6_cca2_1da4b3ea849b
  7c3c22f8_be1a_4490_9f3e_622280887fe1["postcss"]
  85ba2ac2_aa8c_15cb_ed3c_011dc66339d7 --> 7c3c22f8_be1a_4490_9f3e_622280887fe1
  f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3["vitest"]
  85ba2ac2_aa8c_15cb_ed3c_011dc66339d7 --> f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3
  style 85ba2ac2_aa8c_15cb_ed3c_011dc66339d7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import dedent from 'dedent'
import postcss from 'postcss'
import { expect, it } from 'vitest'
import { toCss } from '../../tailwindcss/src/ast'
import { parse } from '../../tailwindcss/src/css-parser'
import { cssAstToPostCssAst, postCssAstToCssAst } from './ast'

let css = dedent

it('should convert a PostCSS AST into a Tailwind CSS AST', () => {
  let input = css`
    @charset "UTF-8";

    @layer foo, bar, baz;

    @import 'tailwindcss';

    .foo {
      color: red;

      &:hover {
        color: blue;
      }

      .bar {
        color: green !important;
        background-color: yellow;

        @media (min-width: 640px) {
          color: orange;
        }
      }
    }
  `

  let ast = postcss.parse(input)
  let transformedAst = postCssAstToCssAst(ast)

  expect(toCss(transformedAst)).toMatchInlineSnapshot(`
    "@charset "UTF-8";
    @layer foo, bar, baz;
    @import 'tailwindcss';
    .foo {
      color: red;
      &:hover {
        color: blue;
      }
      .bar {
        color: green !important;
        background-color: yellow;
        @media (min-width: 640px) {
          color: orange;
        }
      }
    }
    "
  `)
})

it('should convert a Tailwind CSS AST into a PostCSS AST', () => {
  let input = css`
    @charset "UTF-8";

    @layer foo, bar, baz;

    @import 'tailwindcss';

    .foo {
      color: red;

      &:hover {
        color: blue;
      }

      .bar {
        color: green !important;
        background-color: yellow;

        @media (min-width: 640px) {
          color: orange;
        }
      }
    }
  `

  let ast = parse(input)
  let transformedAst = cssAstToPostCssAst(postcss, ast)

  expect(transformedAst.toString()).toMatchInlineSnapshot(`
    "@charset "UTF-8";
    @layer foo, bar, baz;
    @import 'tailwindcss';
    .foo {
        color: red;
        &:hover {
            color: blue;
        }
        .bar {
            color: green !important;
            background-color: yellow;
            @media (min-width: 640px) {
                color: orange;
            }
        }
    }"
  `)
})

Domain

Dependencies

Source

Frequently Asked Questions

What does ast.test.ts do?
ast.test.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the PostCSSPlugin domain.
What does ast.test.ts depend on?
ast.test.ts imports 10 module(s): ast.ts, ast.ts, css-parser.ts, cssAstToPostCssAst, dedent, parse, postCssAstToCssAst, postcss, and 2 more.
Where is ast.test.ts in the architecture?
ast.test.ts is located at packages/@tailwindcss-postcss/src/ast.test.ts (domain: PostCSSPlugin, directory: packages/@tailwindcss-postcss/src).

Analyze Your Own Codebase

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

Try Supermodel Free