tailwindcss Architecture Docs
Home / File/ virtual-modules.test.ts — tailwindcss Source File

virtual-modules.test.ts — tailwindcss Source File

Architecture documentation for virtual-modules.test.ts, a typescript file in the tailwindcss codebase. 6 imports, 0 dependents.

File typescript Oxide PreProcessors 6 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  f9f8f8f4_41e9_b333_5bcc_849c79fdf196["virtual-modules.test.ts"]
  7600373a_3645_efb1_bcbb_e7c3fcb813ac["utils.ts"]
  f9f8f8f4_41e9_b333_5bcc_849c79fdf196 --> 7600373a_3645_efb1_bcbb_e7c3fcb813ac
  ce18acb2_833c_61a7_166d_0fd7613ce1c0["candidate"]
  f9f8f8f4_41e9_b333_5bcc_849c79fdf196 --> ce18acb2_833c_61a7_166d_0fd7613ce1c0
  522399f9_a5a8_fa94_794a_917ab0d0a66d["fetchStyles"]
  f9f8f8f4_41e9_b333_5bcc_849c79fdf196 --> 522399f9_a5a8_fa94_794a_917ab0d0a66d
  22238dde_7df7_64d5_1424_a93cf2421b15["retryAssertion"]
  f9f8f8f4_41e9_b333_5bcc_849c79fdf196 --> 22238dde_7df7_64d5_1424_a93cf2421b15
  44ea7d66_6ac1_15b9_1cc7_d01c23a5ee04["test"]
  f9f8f8f4_41e9_b333_5bcc_849c79fdf196 --> 44ea7d66_6ac1_15b9_1cc7_d01c23a5ee04
  8454872a_1bfa_3cb3_db8f_6d2e7e422a55["node:url"]
  f9f8f8f4_41e9_b333_5bcc_849c79fdf196 --> 8454872a_1bfa_3cb3_db8f_6d2e7e422a55
  style f9f8f8f4_41e9_b333_5bcc_849c79fdf196 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { candidate, css, fetchStyles, html, retryAssertion, test, ts, txt } from '../utils'

const WORKSPACE = {
  'package.json': txt`
      {
        "type": "module",
        "dependencies": {
          "@tailwindcss/vite": "workspace:^",
          "tailwindcss": "workspace:^"
        },
        "devDependencies": {
          "vite": "^5.3.5"
        }
      }
    `,
  'vite.config.ts': ts`
    import tailwindcss from '@tailwindcss/vite'
    import { defineConfig } from 'vite'
    import { fileURLToPath } from 'node:url'

    export default defineConfig({
      build: { cssMinify: false },
      plugins: [tailwindcss(), virtualModule()],
    })

    function virtualModule() {
      const virtualModuleId = 'virtual:my-module.css'
      const resolvedVirtualModuleId = '�' + virtualModuleId

      return {
        name: 'my-plugin',
        resolveId(id) {
          if (id === virtualModuleId) {
            return resolvedVirtualModuleId
          }
        },
        load(id) {
          if (id === resolvedVirtualModuleId) {
            return 'export default {}'
          }
        },
      }
    }
  `,
  'index.html': html`
      <head>
      <link rel="stylesheet" href="./src/index.css" />
      <script type="module" src="./src/index.js"></script>
    </head>
    <body>
      <div class="underline">Hello, world!</div>
    </body>
  `,
  'src/index.js': ts`import 'virtual:my-module.css'`,
  'src/index.css': css`@import 'tailwindcss';`,
}

test(
  'does not crash when importing a virtual module ending in .css in production builds',
  { fs: WORKSPACE },
  async ({ fs, exec, expect }) => {
    await exec('pnpm vite build')

    let files = await fs.glob('dist/**/*.css')
    expect(files).toHaveLength(1)
    let [filename] = files[0]

    await fs.expectFileToContain(filename, [candidate`underline`])
  },
)

test('loads virtual modules in dev mode', { fs: WORKSPACE }, async ({ spawn, expect }) => {
  let process = await spawn('pnpm vite dev')
  await process.onStdout((m) => m.includes('ready in'))

  let url = ''
  await process.onStdout((m) => {
    let match = /Local:\s*(http.*)\//.exec(m)
    if (match) url = match[1]
    return Boolean(url)
  })

  await retryAssertion(async () => {
    let styles = await fetchStyles(url, '/index.html')
    expect(styles).toContain(candidate`underline`)
  })
})

Domain

Subdomains

Functions

Dependencies

Source

Frequently Asked Questions

What does virtual-modules.test.ts do?
virtual-modules.test.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the Oxide domain, PreProcessors subdomain.
What functions are defined in virtual-modules.test.ts?
virtual-modules.test.ts defines 1 function(s): virtualModule.
What does virtual-modules.test.ts depend on?
virtual-modules.test.ts imports 6 module(s): candidate, fetchStyles, node:url, retryAssertion, test, utils.ts.
Where is virtual-modules.test.ts in the architecture?
virtual-modules.test.ts is located at integrations/vite/virtual-modules.test.ts (domain: Oxide, subdomain: PreProcessors, directory: integrations/vite).

Analyze Your Own Codebase

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

Try Supermodel Free