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 OxideEngine Extractor 6 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  646b82a4_a83d_baef_4a21_ff6f053499f1["virtual-modules.test.ts"]
  9ffd1dda_9675_c514_373d_0f4ab4648249["utils.ts"]
  646b82a4_a83d_baef_4a21_ff6f053499f1 --> 9ffd1dda_9675_c514_373d_0f4ab4648249
  b7531519_9055_fbfa_5f69_ebc8586b0422["candidate"]
  646b82a4_a83d_baef_4a21_ff6f053499f1 --> b7531519_9055_fbfa_5f69_ebc8586b0422
  41c6e4f2_197a_5e83_1beb_584bbb4130fa["fetchStyles"]
  646b82a4_a83d_baef_4a21_ff6f053499f1 --> 41c6e4f2_197a_5e83_1beb_584bbb4130fa
  329ca5ee_2e24_1ec5_6818_8fdc3622dda9["retryAssertion"]
  646b82a4_a83d_baef_4a21_ff6f053499f1 --> 329ca5ee_2e24_1ec5_6818_8fdc3622dda9
  f11e3be9_51f8_140b_68b0_f58ddd082595["test"]
  646b82a4_a83d_baef_4a21_ff6f053499f1 --> f11e3be9_51f8_140b_68b0_f58ddd082595
  83f4eb5c_a623_9c4e_b3f7_d95e77d40d82["node:url"]
  646b82a4_a83d_baef_4a21_ff6f053499f1 --> 83f4eb5c_a623_9c4e_b3f7_d95e77d40d82
  style 646b82a4_a83d_baef_4a21_ff6f053499f1 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 OxideEngine domain, Extractor 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: OxideEngine, subdomain: Extractor, directory: integrations/vite).

Analyze Your Own Codebase

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

Try Supermodel Free