createSetup() — tailwindcss Function Reference

Architecture documentation for the createSetup() function in other-transforms.test.ts from the tailwindcss codebase.

Function typescript OxideEngine PreProcessors

Entity Profile

OxideEngine→ PreProcessors→ createSetup() — tailwindcss Function Reference

Dependency Diagram

graph TD
  2ec8bd02_d13a_bd52_c7a6_8e4b1cf8ebbd["createSetup()"]
  66b35448_8bfe_3a18_6925_e949c5e851a8["other-transforms.test.ts"]
  2ec8bd02_d13a_bd52_c7a6_8e4b1cf8ebbd -->|defined in| 66b35448_8bfe_3a18_6925_e949c5e851a8
  style 2ec8bd02_d13a_bd52_c7a6_8e4b1cf8ebbd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

integrations/vite/other-transforms.test.ts lines 5–59

function createSetup(transformer: 'postcss' | 'lightningcss') {
  return {
    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(),
            {
              name: 'recolor',
              transform(code, id) {
                if (id.includes('.css')) {
                  return code.replace(/red;/g, 'blue;')
                }
              },
            },
          ],
        })
      `,
      'index.html': html`
        <head>
          <link rel="stylesheet" href="./src/index.css" />
        </head>
        <body>
          <div class="foo [background-color:red]">Hello, world!</div>
        </body>
      `,
      'src/index.css': css`
        @reference 'tailwindcss/theme';
        @import 'tailwindcss/utilities';

        .foo {
          color: red;
        }
      `,
    },
  }
}