Detect static plugins in the JS config and migrate it to CSS

Author: philipp-spiess

integrations/upgrade/js-config.test.ts

@@ -8,15 +8,18 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "@tailwindcss/typography": "^0.5.15",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
       `,
       'tailwind.config.ts': ts`
         import { type Config } from 'tailwindcss'
         import defaultTheme from 'tailwindcss/defaultTheme'
+        import typography from '@tailwindcss/typography'
+        import customPlugin from './custom-plugin'
 
-        module.exports = {
+        export default {
           darkMode: 'selector',
           content: ['./src/**/*.{html,js}', './my-app/**/*.{html,js}'],
           theme: {
@@ -50,9 +53,15 @@ test(
               },
             },
           },
-          plugins: [],
+          plugins: [typography, customPlugin],
         } satisfies Config
       `,
+      'custom-plugin.js': ts`
+        export default function ({ addVariant }) {
+          addVariant('inverted', '@media (inverted-colors: inverted)')
+          addVariant('hocus', ['&:focus', '&:hover'])
+        }
+      `,
       'src/input.css': css`
         @tailwind base;
         @tailwind components;
@@ -71,6 +80,9 @@ test(
       @source './**/*.{html,js}';
       @source '../my-app/**/*.{html,js}';
 
+      @plugin '@tailwindcss/typography';
+      @plugin '../custom-plugin';
+
       @variant dark (&:where(.dark, .dark *));
 
       @theme {
@@ -101,3 +113,52 @@ test(
     expect((await fs.dumpFiles('tailwind.config.ts')).trim()).toBe('')
   },
 )
+
+test(
+  `does not upgrade a complex JS config file to CSS`,
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'tailwind.config.ts': ts`
+        import { type Config } from 'tailwindcss'
+
+        export default {
+          plugins: [function complexConfig() {}],
+        } satisfies Config
+      `,
+      'src/input.css': css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `,
+    },
+  },
+  async ({ exec, fs }) => {
+    await exec('npx @tailwindcss/upgrade')
+
+    expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
+      "
+      --- src/input.css ---
+      @import 'tailwindcss';
+      @config '../tailwind.config.ts';
+      "
+    `)
+
+    expect(await fs.dumpFiles('tailwind.config.ts')).toMatchInlineSnapshot(`
+      "
+      --- tailwind.config.ts ---
+      import { type Config } from 'tailwindcss'
+
+      export default {
+        plugins: [function complexConfig() {}],
+      } satisfies Config
+      "
+    `)
+  },
+)

packages/@tailwindcss-upgrade/package.json

@@ -39,7 +39,9 @@
     "postcss-selector-parser": "^6.1.2",
     "prettier": "^3.3.3",
     "string-byte-slice": "^3.0.0",
-    "tailwindcss": "workspace:^"
+    "tailwindcss": "workspace:^",
+    "tree-sitter": "^0.21.1",
+    "tree-sitter-typescript": "^0.23.0"
   },
   "devDependencies": {
     "@types/node": "catalog:",

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

@@ -55,11 +55,21 @@ export function migrateConfig(
         let absolute = path.resolve(source.base, source.pattern)
         css += `@source '${relativeToStylesheet(sheet, absolute)}';\n`
       }
-
       if (jsConfigMigration.sources.length > 0) {
         css = css + '\n'
       }
 
+      for (let plugin of jsConfigMigration.plugins) {
+        let relative =
+          plugin.path[0] === '.'
+            ? relativeToStylesheet(sheet, path.resolve(plugin.base, plugin.path))
+            : plugin.path
+        css += `@plugin '${relative}';\n`
+      }
+      if (jsConfigMigration.plugins.length > 0) {
+        css = css + '\n'
+      }
+
       cssConfig.append(postcss.parse(css + jsConfigMigration.css))
     }
 

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

@@ -10,6 +10,7 @@ import {
 import { deepMerge } from '../../tailwindcss/src/compat/config/deep-merge'
 import { mergeThemeExtension } from '../../tailwindcss/src/compat/config/resolve-config'
 import { darkModePlugin } from '../../tailwindcss/src/compat/dark-mode'
+import { findSimplePlugins } from './utils/extract-static-imports'
 import { info } from './utils/renderer'
 
 const __filename = fileURLToPath(import.meta.url)
@@ -19,6 +20,7 @@ export type JSConfigMigration =
   // Could not convert the config file, need to inject it as-is in a @config directive
   null | {
     sources: { base: string; pattern: string }[]
+    plugins: { base: string; path: string }[]
     css: string
   }
 
@@ -39,6 +41,7 @@ export async function migrateJsConfig(
   }
 
   let sources: { base: string; pattern: string }[] = []
+  let plugins: { base: string; path: string }[] = []
   let cssConfigs: string[] = []
 
   if ('darkMode' in unresolvedConfig) {
@@ -53,8 +56,17 @@ export async function migrateJsConfig(
     cssConfigs.push(await migrateTheme(unresolvedConfig as any))
   }
 
+  let simplePlugins = findSimplePlugins(source)
+  console.log(simplePlugins)
+  if (simplePlugins !== null) {
+    for (let plugin of simplePlugins) {
+      plugins.push({ base, path: plugin })
+    }
+  }
+
   return {
     sources,
+    plugins,
     css: cssConfigs.join('\n'),
   }
 }
@@ -158,7 +170,9 @@ function isSimpleConfig(unresolvedConfig: Config, source: string): boolean {
     }
     return ['string', 'number', 'boolean', 'undefined'].includes(typeof value)
   }
-  if (!isSimpleValue(unresolvedConfig)) {
+  // Plugins can be complex, we have a special heuristics for them!
+  let { plugins, ...remainder } = unresolvedConfig
+  if (!isSimpleValue(remainder)) {
     return false
   }
 
@@ -174,7 +188,7 @@ function isSimpleConfig(unresolvedConfig: Config, source: string): boolean {
   if (Object.keys(unresolvedConfig).some((key) => !knownProperties.includes(key))) {
     return false
   }
-  if (unresolvedConfig.plugins && unresolvedConfig.plugins.length > 0) {
+  if (findSimplePlugins(source) === null) {
     return false
   }
   if (unresolvedConfig.presets && unresolvedConfig.presets.length > 0) {

packages/@tailwindcss-upgrade/src/utils/extract-static-imports.test.ts

@@ -0,0 +1,89 @@
+import dedent from 'dedent'
+import { expect, test } from 'vitest'
+import { extractStaticImportMap, findSimplePlugins } from './extract-static-imports'
+
+const js = dedent
+
+test('extracts different kind of imports from a source file', () => {
+  let extracted = extractStaticImportMap(js`
+    import plugin1 from './plugin1'
+    // import * as plugin2 from './plugin2'
+    import plugin6, { plugin3, plugin4, default as plugin5 } from './plugin3'
+    // import * as plugin7, { plugin8, foo as plugin9 } from './plugin7'
+
+    // const plugin6 = require('plugin6')
+    // const {plugin7} = require('plugin7')
+    // const {foo: plugin8} = require('plugin8')
+    // let plugin9 = require('plugin9')
+    // let {plugin10} = require('plugin10')
+    // let {foo: plugin11} = require('plugin11')
+    // let plugin12 = require('plugin12')
+    // let {plugin13} = require('plugin13')
+    // let {foo: plugin14} = require('plugin14')
+  `)
+
+  expect(extracted).toEqual({
+    plugin1: { module: './plugin1', export: null },
+    // plugin2: { module: './plugin2', export: 'plugin2' },
+    plugin3: { module: './plugin3', export: 'plugin3' },
+    plugin4: { module: './plugin3', export: 'plugin4' },
+    plugin5: { module: './plugin3', export: 'default' },
+    plugin6: { module: './plugin3', export: null },
+
+    // plugin6: { module: 'plugin6', export: null },
+    // plugin7: { module: 'plugin7', export: 'plugin7' },
+    // plugin8: { module: 'plugin8', export: 'foo' },
+    // plugin9: { module: 'plugin9', export: null },
+    // plugin10: { module: 'plugin10', export: 'plugin10' },
+    // plugin11: { module: 'plugin11', export: 'foo' },
+    // plugin12: { module: 'plugin12', export: null },
+    // plugin13: { module: 'plugin13', export: 'plugin13' },
+    // plugin14: { module: 'plugin14', export: 'foo' },
+  })
+})
+
+test('find simple plugins', () => {
+  expect(
+    findSimplePlugins(js`
+      import plugin1 from './plugin1'
+
+      export default {
+        plugins: [plugin1, 'plugin2']
+      }
+    `),
+  ).toEqual(['./plugin1', 'plugin2'])
+
+  expect(
+    findSimplePlugins(js`
+      import plugin1 from './plugin1'
+
+      export default {
+        plugins: [plugin1, () => {} ]
+      }
+    `),
+  ).toEqual(null)
+
+  expect(
+    findSimplePlugins(js`
+      import {plugin1} from './plugin1'
+
+      export default {
+        plugins: [plugin1]
+      }
+    `),
+  ).toEqual(null)
+
+  expect(
+    findSimplePlugins(js`
+      export default {
+        plugins: []
+      }
+    `),
+  ).toEqual([])
+
+  expect(
+    findSimplePlugins(js`
+      export default {}
+    `),
+  ).toEqual([])
+})