CSS codemod: Add prefix(…) to necessary CSS imports when a prefix is used.

packages/@tailwindcss-upgrade/src/codemods/migrate-prefix-config-option.test.ts

@@ -0,0 +1,121 @@
+import dedent from 'dedent'
+import postcss from 'postcss'
+import { expect, it } from 'vitest'
+import type { DesignSystem } from '../../../tailwindcss/src/design-system'
+import { __unstable__loadDesignSystem } from '../../../tailwindcss/src/index'
+import { formatNodes } from './format-nodes'
+import { migratePrefixConfigOption } from './migrate-prefix-config-option'
+
+const css = dedent
+
+function migrate(input: string, designSystem?: DesignSystem) {
+  return postcss()
+    .use(migratePrefixConfigOption(designSystem))
+    .use(formatNodes())
+    .process(input, { from: expect.getState().testPath })
+    .then((result) => result.css)
+}
+
+it('Does not add prefix when not configured`', async () => {
+  let designSystem = await __unstable__loadDesignSystem(
+    css`
+      @config "config.js";
+    `,
+    {
+      base: __dirname,
+      loadModule: async (id, base) => ({ base, module: {} }),
+    },
+  )
+
+  expect(
+    await migrate(
+      css`
+        @import 'tailwindcss';
+        @import 'tailwindcss/theme';
+      `,
+      designSystem,
+    ),
+  ).toMatchInlineSnapshot(`
+    "@import 'tailwindcss';
+    @import 'tailwindcss/theme';"
+  `)
+})
+
+it('Adds prefix to imports', async () => {
+  let designSystem = await __unstable__loadDesignSystem(
+    css`
+      @config "config.js";
+    `,
+    {
+      base: __dirname,
+      loadModule: async (id, base) => ({ base, module: { prefix: 'tw' } }),
+    },
+  )
+
+  expect(
+    await migrate(
+      css`
+        @import 'tailwindcss';
+        @import 'tailwindcss' layer(tailwind);
+        @import 'tailwindcss/theme';
+        @import 'tailwindcss/theme' layer(theme);
+      `,
+      designSystem,
+    ),
+  ).toMatchInlineSnapshot(`
+    "@import 'tailwindcss' prefix(tw);
+    @import 'tailwindcss' layer(tailwind) prefix(tw);
+    @import 'tailwindcss/theme' prefix(tw);
+    @import 'tailwindcss/theme' layer(theme) prefix(tw);"
+  `)
+})
+
+it('Does not add prefix if it is already there', async () => {
+  let designSystem = await __unstable__loadDesignSystem(
+    css`
+      @config "config.js";
+    `,
+    {
+      base: __dirname,
+      loadModule: async (id, base) => ({ base, module: { prefix: 'tw' } }),
+    },
+  )
+
+  expect(
+    await migrate(
+      css`
+        @import 'tailwindcss' prefix(wat);
+        @import 'tailwindcss/theme' prefix(wat);
+      `,
+      designSystem,
+    ),
+  ).toMatchInlineSnapshot(`
+    "@import 'tailwindcss' prefix(wat);
+    @import 'tailwindcss/theme' prefix(wat);"
+  `)
+})
+
+it('Migrates a prefix ending with a dash', async () => {
+  let designSystem = await __unstable__loadDesignSystem(
+    css`
+      @config "config.js";
+    `,
+    {
+      base: __dirname,
+      loadModule: async (id, base) => ({ base, module: { prefix: 'tw-' } }),
+    },
+  )
+
+  expect(
+    await migrate(
+      css`
+        @import 'tailwindcss';
+        @import 'tailwindcss/theme';
+      `,
+      designSystem,
+    ),
+  ).toMatchInlineSnapshot(`
+    "@import 'tailwindcss' prefix(tw);
+    @import 'tailwindcss/theme' prefix(tw);"
+  `)
+})

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

@@ -0,0 +1,37 @@
+import { type Plugin, type Root } from 'postcss'
+import type { DesignSystem } from '../../../tailwindcss/src/design-system'
+
+export function migratePrefixConfigOption(designSystem?: DesignSystem): Plugin {
+  let prefix = designSystem?.theme.prefix
+
+  // @import "tailwindcss"
+  // @import "tailwindcss/theme"
+  let IS_TAILWIND_IMPORT = /^["']tailwindcss(\/theme)?["']/
+  let HAS_PREFIX = /prefix([^)]+)/
+
+  function migrate(root: Root) {
+    // If there's no prefix configured, we don't need to do anything
+    if (typeof prefix !== 'string') return
+
+    root.walkAtRules((node) => {
+      if (node.name !== 'import') return
+      if (!node.params.match(IS_TAILWIND_IMPORT)) return
+      if (node.params.match(HAS_PREFIX)) return
+
+      node.params += ` prefix(${prefix})`
+    })
+  }
+
+  // TODO: We should remove `prefix: "…"` from the config file
+  // - if its on its own line just remove the line
+  // - if not then just remove the `prefix: "…"` part
+  // - do we need to use a JS AST thing for this?
+  //
+  // The prefix might be in a preset or a plugin so if we don't find it
+  // we should just log a warning and let the user handle it themselves
+
+  return {
+    postcssPlugin: '@tailwindcss/upgrade/migrate-prefix-config-option',
+    OnceExit: migrate,
+  }
+}

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

@@ -103,7 +103,9 @@ async function run() {
     files = files.filter((file) => file.endsWith('.css'))
 
     // Migrate each file
-    await Promise.allSettled(files.map((file) => migrateStylesheet(file)))
+    await Promise.allSettled(
+      files.map((file) => migrateStylesheet(file, parsedConfig?.designSystem)),
+    )
 
     success('Stylesheet migration complete.')
   }

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

@@ -1,26 +1,33 @@
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import postcss from 'postcss'
+import type { DesignSystem } from '../../tailwindcss/src/design-system'
 import { formatNodes } from './codemods/format-nodes'
 import { migrateAtApply } from './codemods/migrate-at-apply'
 import { migrateAtLayerUtilities } from './codemods/migrate-at-layer-utilities'
 import { migrateMissingLayers } from './codemods/migrate-missing-layers'
+import { migratePrefixConfigOption } from './codemods/migrate-prefix-config-option'
 import { migrateTailwindDirectives } from './codemods/migrate-tailwind-directives'
 
-export async function migrateContents(contents: string, file?: string) {
+export async function migrateContents(
+  contents: string,
+  file?: string,
+  designSystem?: DesignSystem,
+) {
   return postcss()
     .use(migrateAtApply())
     .use(migrateAtLayerUtilities())
     .use(migrateMissingLayers())
     .use(migrateTailwindDirectives())
+    .use(migratePrefixConfigOption(designSystem))
     .use(formatNodes())
     .process(contents, { from: file })
     .then((result) => result.css)
 }
 
-export async function migrate(file: string) {
+export async function migrate(file: string, designSystem?: DesignSystem) {
   let fullPath = path.resolve(process.cwd(), file)
   let contents = await fs.readFile(fullPath, 'utf-8')
 
-  await fs.writeFile(fullPath, await migrateContents(contents, fullPath))
+  await fs.writeFile(fullPath, await migrateContents(contents, fullPath, designSystem))
 }