css-modules.test.ts — tailwindcss Source File

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

File typescript Oxide 3 imports

Entity Profile

Oxide→ css-modules.test.ts — tailwindcss Source File

Dependency Diagram

graph LR
  547fc1d7_839f_dbcf_5674_129f4a81451a["css-modules.test.ts"]
  7600373a_3645_efb1_bcbb_e7c3fcb813ac["utils.ts"]
  547fc1d7_839f_dbcf_5674_129f4a81451a --> 7600373a_3645_efb1_bcbb_e7c3fcb813ac
  44ea7d66_6ac1_15b9_1cc7_d01c23a5ee04["test"]
  547fc1d7_839f_dbcf_5674_129f4a81451a --> 44ea7d66_6ac1_15b9_1cc7_d01c23a5ee04
  f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3["vitest"]
  547fc1d7_839f_dbcf_5674_129f4a81451a --> f1e05e5f_c1b2_a3f5_b2e8_3317b9243ac3
  style 547fc1d7_839f_dbcf_5674_129f4a81451a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { describe } from 'vitest'
import { css, html, test, ts, txt } from '../utils'

describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
  test(
    `dev mode`,
    {
      fs: {
        'package.json': txt`
          {
            "type": "module",
            "dependencies": {
              "@tailwindcss/vite": "workspace:^",
              "tailwindcss": "workspace:^"
            },
            "devDependencies": {
              ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
              "vite": "^7"
            }
          }
        `,
        'vite.config.ts': ts`
          import tailwindcss from '@tailwindcss/vite'
          import { defineConfig } from 'vite'

          export default defineConfig({
            css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
            build: { cssMinify: false },
            plugins: [tailwindcss()],
          })
        `,
        'index.html': html`
          <head>
            <script type="module" src="/src/component.ts"></script>
          </head>
          <body>
            <div id="root" />
          </body>
        `,
        'src/component.ts': ts`
          import { foo } from './component.module.css'
          let root = document.getElementById('root')
          root.className = foo
          root.innerText = 'Hello, world!'
        `,
        'src/component.module.css': css`
          @import 'tailwindcss/utilities';

          .foo {
            @apply underline;
          }
        `,
      },
    },
    async ({ exec, fs, 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, [/text-decoration-line: underline;/gi])
    },
  )
})