Repository: tailwindlabs/tailwindcss
File: integrations/upgrade/index.test.ts (TypeScript)

Code before:
        /* Inject missing @config due to nested imports with tailwind imports */
        @import './root.4/base.css';
        @import './root.4/utilities.css';
      `,
      'src/root.4/base.css': css`@import 'tailwindcss/preflight';`,
      'src/root.4/utilities.css': css`@import 'tailwindcss/utilities';`,

      'src/root.5.css': css`@import './root.5/tailwind.css';`,
      'src/root.5/tailwind.css': css`
        /* Inject missing @config in this file, due to full import */
        @import 'tailwindcss';
      `,
    },
  },
  async ({ exec }) => {
    let output = await exec('npx @tailwindcss/upgrade --force', {}, { ignoreStdErr: true }).catch(
      (e) => e.toString(),
    )

    output = stripVTControlCharacters(output)
      .replace(/tailwindcss v(.*)/g, 'tailwindcss') // Remove the version number from the error message
      .replace(/\\/g, '/') // Make Windows paths look like Unix paths

    expect(output).toMatchInlineSnapshot(`
      "Error: Command failed: npx @tailwindcss/upgrade --force
      ≈ tailwindcss

      │ No input stylesheets provided. Searching for CSS files in the current directory and its subdirectories…

      │ Linked \`./tailwind.config.ts\` to \`./src/root.1.css\`

      │ Linked \`./tailwind.config.ts\` to \`./src/root.3.css\`

      │ Linked \`./tailwind.config.ts\` to \`./src/root.4.css\`

      │ Linked \`./tailwind.config.ts\` to \`./src/root.5/tailwind.css\`

      │ You have multiple stylesheets that do not have an \`@config\`.
      │ Please add a \`@config "…";\` referencing the correct Tailwind config file to:
      │ - ./src/root.1.css
      │ - ./src/root.3.css
      │ - ./src/root.4.css
      │ - ./src/root.5/tailwind.css

      "
    `)
  },
)

test(
  'injecting `@config` in the shared root, when a tailwind.config.{js,ts,…} is detected',

Review comment (bug):
should this be a `toIncludes`?
Getting some node version specific warnings in the CLI when i run it locally lol, prob i need to downgrade my node version to fix this:


```
+ (node:10064) ExperimentalWarning: CommonJS module /Users/philipp/.local/share/mise/installs/node/23.1.0/lib/node_modules/npm/node_modules/debug/src/node.js is loading ES Module /Users/philipp/.local/share/mise/installs/node/23.1.0/lib/node_modules/npm/node_modules/supports-color/index.js using require().
+ Support for loading ES Module in require() is an experimental feature and might change at any time
+ (Use `node --trace-warnings ...` to show where the warning was created)
```

Code after:
      'src/root.4.css': css`
        /* Inject missing @config due to nested imports with tailwind imports */
        @import './root.4/base.css';
        @import './root.4/utilities.css';
      `,
      'src/root.4/base.css': css`@import 'tailwindcss/base';`,
      'src/root.4/utilities.css': css`@import 'tailwindcss/utilities';`,

      'src/root.5.css': css`@import './root.5/tailwind.css';`,
      'src/root.5/tailwind.css': css`
        /* Inject missing @config in this file, due to full import */
        @import 'tailwindcss/tailwind.css';
      `,
    },
  },
  async ({ exec }) => {
    let output = await exec('npx @tailwindcss/upgrade --force', {}, { ignoreStdErr: true }).catch(
      (e) => e.toString(),
    )

    expect(output).toMatch('Could not determine configuration file for:')
  },
)

test(
  'injecting `@config` in the shared root, when a tailwind.config.{js,ts,…} is detected',
  {
    fs: {
      'package.json': json`
        {
          "dependencies": {
            "tailwindcss": "^3",
            "@tailwindcss/upgrade": "workspace:^"
          }
        }
      `,
      'tailwind.config.ts': js`
        export default {
          content: ['./src/**/*.{html,js}'],
          plugins: [
            () => {
              // custom stuff which is too complicated to migrate to CSS
            },
          ],
        }
      `,
      'src/index.html': html`
        <div
          class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"
        ></div>
      `,