ensure @config "…" is added when tailwind.config.js is detected

Author: RobinMalfait

integrations/upgrade/index.test.ts

@@ -39,7 +39,8 @@ test(
       <div class="flex! sm:block! bg-linear-to-t bg-[var(--my-red)]"></div>
 
       --- ./src/input.css ---
-      @import 'tailwindcss';"
+      @import 'tailwindcss';
+      @config "../tailwind.config.js";"
     `)
   },
 )
@@ -89,6 +90,8 @@ test(
       --- ./src/input.css ---
       @import 'tailwindcss' prefix(tw);
 
+      @config "../tailwind.config.js";
+
       .btn {
         @apply tw:rounded-md! tw:px-2 tw:py-1 tw:bg-blue-500 tw:text-white;
       }"
@@ -134,6 +137,8 @@ test(
       --- ./src/index.css ---
       @import 'tailwindcss';
 
+      @config "../tailwind.config.js";
+
       .a {
         @apply flex;
       }
@@ -187,6 +192,8 @@ test(
       --- ./src/index.css ---
       @import 'tailwindcss';
 
+      @config "../tailwind.config.js";
+
       @layer base {
         html {
           color: #333;
@@ -245,6 +252,8 @@ test(
       --- ./src/index.css ---
       @import 'tailwindcss';
 
+      @config "../tailwind.config.js";
+
       @utility btn {
         @apply rounded-md px-2 py-1 bg-blue-500 text-white;
       }
@@ -297,6 +306,7 @@ test(
       --- ./src/index.css ---
       @import 'tailwindcss';
       @import './utilities.css';
+      @config "../tailwind.config.js";
 
       --- ./src/utilities.css ---
       @utility no-scrollbar {
@@ -412,6 +422,7 @@ test(
       @import './c.1.css' layer(utilities);
       @import './c.1.utilities.css';
       @import './d.1.css';
+      @config "../tailwind.config.js";
 
       --- ./src/a.1.css ---
       @import './a.1.utilities.css'
@@ -544,14 +555,17 @@ test(
       --- ./src/root.1.css ---
       @import 'tailwindcss/utilities' layer(utilities);
       @import './a.1.css' layer(utilities);
+      @config "../tailwind.config.js";
 
       --- ./src/root.2.css ---
       @import 'tailwindcss/utilities' layer(utilities);
       @import './a.1.css' layer(components);
+      @config "../tailwind.config.js";
 
       --- ./src/root.3.css ---
       @import 'tailwindcss/utilities' layer(utilities);
-      @import './a.1.css' layer(utilities);"
+      @import './a.1.css' layer(utilities);
+      @config "../tailwind.config.js";"
     `)
   },
 )
@@ -643,3 +657,50 @@ test(
     )
   },
 )
+
+test(
+  'injecting `@config` when a tailwind.config.{js,ts,…} is detected',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'tailwind.config.ts': js`
+        export default {
+          content: ['./src/**/*.{html,js}'],
+        }
+      `,
+      'src/index.html': html`
+        <h1>🤠👋</h1>
+        <div class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"></div>
+      `,
+      'src/input.css': css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `,
+    },
+  },
+  async ({ exec, fs }) => {
+    await exec('npx @tailwindcss/upgrade --force')
+
+    await fs.expectFileToContain(
+      'src/index.html',
+      html`
+        <h1>🤠👋</h1>
+        <div class="flex! sm:block! bg-linear-to-t bg-[var(--my-red)]"></div>
+      `,
+    )
+
+    expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
+      "
+      --- ./src/input.css ---
+      @import 'tailwindcss';
+      @config "../tailwind.config.ts";"
+    `)
+  },
+)

packages/@tailwindcss-upgrade/src/codemods/migrate-at-config.ts

@@ -0,0 +1,73 @@
+import path from 'node:path'
+import { AtRule, type Plugin, type Root } from 'postcss'
+import type { Stylesheet } from '../stylesheet'
+import { walk, WalkAction } from '../utils/walk'
+
+export function migrateAtConfig(
+  sheet: Stylesheet,
+  { configFilePath }: { configFilePath: string },
+): Plugin {
+  function migrate(root: Root) {
+    let hasConfig = false
+    root.walkAtRules('config', () => {
+      hasConfig = true
+      return false
+    })
+
+    // We already have a `@config`
+    if (hasConfig) return
+
+    // We don't have a sheet with a file path
+    // TODO: Why? Tests?
+    if (!sheet.file) return
+
+    // Should this sheet have an `@config`?
+    // 1. It should be a root CSS file
+    if (sheet.parents.size > 0) return
+
+    // 2. It should include a `@import "tailwindcss"`
+    let hasTailwindImport = false
+    root.walkAtRules('import', (node) => {
+      if (node.params.includes('tailwindcss')) {
+        hasTailwindImport = true
+        return false
+      }
+    })
+    if (!hasTailwindImport) return
+
+    // Figure out the path to the config file
+    let sheetPath = sheet.file
+    let configPath = configFilePath
+
+    let relativePath = path.relative(path.dirname(sheetPath), configPath)
+    if (relativePath[0] !== '.') {
+      relativePath = `./${relativePath}`
+    }
+
+    // Inject the `@config` in a sensible place
+    let locationNode = null as AtRule | null
+
+    walk(root, (node) => {
+      if (node.type === 'atrule' && (node.name === 'import' || node.name === 'theme')) {
+        locationNode = node
+      }
+
+      return WalkAction.Skip
+    })
+
+    let configNode = new AtRule({ name: 'config', params: `"${relativePath}"` })
+
+    if (!locationNode) {
+      root.prepend(configNode)
+    } else if (locationNode.name === 'import') {
+      locationNode.after(configNode)
+    } else if (locationNode.name === 'theme') {
+      locationNode.before(configNode)
+    }
+  }
+
+  return {
+    postcssPlugin: '@tailwindcss/upgrade/migrate-at-config',
+    OnceExit: migrate,
+  }
+}

packages/@tailwindcss-upgrade/src/migrate.ts

@@ -5,6 +5,7 @@ import type { DesignSystem } from '../../tailwindcss/src/design-system'
 import { DefaultMap } from '../../tailwindcss/src/utils/default-map'
 import { segment } from '../../tailwindcss/src/utils/segment'
 import { migrateAtApply } from './codemods/migrate-at-apply'
+import { migrateAtConfig } from './codemods/migrate-at-config'
 import { migrateAtLayerUtilities } from './codemods/migrate-at-layer-utilities'
 import { migrateMissingLayers } from './codemods/migrate-missing-layers'
 import { migrateTailwindDirectives } from './codemods/migrate-tailwind-directives'
@@ -16,6 +17,7 @@ export interface MigrateOptions {
   newPrefix: string | null
   designSystem: DesignSystem
   userConfig: Config
+  configFilePath: string
 }
 
 export async function migrateContents(
@@ -33,6 +35,7 @@ export async function migrateContents(
     .use(migrateAtLayerUtilities(stylesheet))
     .use(migrateMissingLayers())
     .use(migrateTailwindDirectives(options))
+    .use(migrateAtConfig(stylesheet, options))
     .process(stylesheet.root, { from: stylesheet.file ?? undefined })
 }
 

packages/@tailwindcss-upgrade/src/template/prepare-config.ts

@@ -22,6 +22,7 @@ export async function prepareConfig(
   designSystem: DesignSystem
   globs: { base: string; pattern: string }[]
   userConfig: Config
+  configFilePath: string
 
   newPrefix: string | null
 }> {
@@ -57,7 +58,13 @@ export async function prepareConfig(
       __unstable__loadDesignSystem(input, { base: __dirname }),
     ])
 
-    return { designSystem, globs: compiler.globs, userConfig, newPrefix }
+    return {
+      designSystem,
+      globs: compiler.globs,
+      userConfig,
+      newPrefix,
+      configFilePath: fullConfigPath,
+    }
   } catch (e: any) {
     error('Could not load the configuration file: ' + e.message)
     process.exit(1)