Include simple config objects when extracting static plugins

Author: philipp-spiess

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

@@ -14,7 +14,7 @@ import { deepMerge } from '../../tailwindcss/src/compat/config/deep-merge'
 import { mergeThemeExtension } from '../../tailwindcss/src/compat/config/resolve-config'
 import type { ThemeConfig } from '../../tailwindcss/src/compat/config/types'
 import { darkModePlugin } from '../../tailwindcss/src/compat/dark-mode'
-import { findStaticPlugins } from './utils/extract-static-plugins'
+import { findStaticPlugins, type StaticPluginOptions } from './utils/extract-static-plugins'
 import { info } from './utils/renderer'
 
 const __filename = fileURLToPath(import.meta.url)
@@ -45,7 +45,7 @@ export async function migrateJsConfig(
   }
 
   let sources: { base: string; pattern: string }[] = []
-  let plugins: { base: string; path: string }[] = []
+  let plugins: { base: string; path: string; options: null | StaticPluginOptions }[] = []
   let cssConfigs: string[] = []
 
   if ('darkMode' in unresolvedConfig) {
@@ -63,8 +63,8 @@ export async function migrateJsConfig(
 
   let simplePlugins = findStaticPlugins(source)
   if (simplePlugins !== null) {
-    for (let plugin of simplePlugins) {
-      plugins.push({ base, path: plugin })
+    for (let [path, options] of simplePlugins) {
+      plugins.push({ base, path, options })
     }
   }
 

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

@@ -15,7 +15,12 @@ describe('findStaticPlugins', () => {
           plugins: [plugin1, plugin2, 'plugin3', require('./plugin4')]
         }
     `),
-    ).toEqual(['./plugin1', './plugin2', 'plugin3', './plugin4'])
+    ).toEqual([
+      ['./plugin1', null],
+      ['./plugin2', null],
+      ['plugin3', null],
+      ['./plugin4', null],
+    ])
 
     expect(
       findStaticPlugins(js`
@@ -26,7 +31,12 @@ describe('findStaticPlugins', () => {
           plugins: [plugin1, plugin2, 'plugin3', require('./plugin4')]
         } as any
     `),
-    ).toEqual(['./plugin1', './plugin2', 'plugin3', './plugin4'])
+    ).toEqual([
+      ['./plugin1', null],
+      ['./plugin2', null],
+      ['plugin3', null],
+      ['./plugin4', null],
+    ])
 
     expect(
       findStaticPlugins(js`
@@ -37,7 +47,12 @@ describe('findStaticPlugins', () => {
           plugins: [plugin1, plugin2, 'plugin3', require('./plugin4')]
         } satisfies any
     `),
-    ).toEqual(['./plugin1', './plugin2', 'plugin3', './plugin4'])
+    ).toEqual([
+      ['./plugin1', null],
+      ['./plugin2', null],
+      ['plugin3', null],
+      ['./plugin4', null],
+    ])
 
     expect(
       findStaticPlugins(js`
@@ -47,7 +62,11 @@ describe('findStaticPlugins', () => {
           plugins: [plugin1, 'plugin2', require('./plugin3')]
         } as any
     `),
-    ).toEqual(['./plugin1', 'plugin2', './plugin3'])
+    ).toEqual([
+      ['./plugin1', null],
+      ['plugin2', null],
+      ['./plugin3', null],
+    ])
 
     expect(
       findStaticPlugins(js`
@@ -57,7 +76,11 @@ describe('findStaticPlugins', () => {
           plugins: [plugin1, 'plugin2', require('./plugin3')]
         } satisfies any
     `),
-    ).toEqual(['./plugin1', 'plugin2', './plugin3'])
+    ).toEqual([
+      ['./plugin1', null],
+      ['plugin2', null],
+      ['./plugin3', null],
+    ])
 
     expect(
       findStaticPlugins(js`
@@ -67,7 +90,87 @@ describe('findStaticPlugins', () => {
           plugins: [plugin1, 'plugin2', require('./plugin3')]
         }
     `),
-    ).toEqual(['./plugin1', 'plugin2', './plugin3'])
+    ).toEqual([
+      ['./plugin1', null],
+      ['plugin2', null],
+      ['./plugin3', null],
+    ])
+  })
+
+  test('can extract plugin options', () => {
+    expect(
+      findStaticPlugins(js`
+        import plugin1 from './plugin1'
+        import * as plugin2 from './plugin2'
+
+        export default {
+          plugins: [
+            plugin1({
+              foo: 'bar',
+            }),
+            plugin2({
+              foo: 'bar',
+            }),
+            require('./plugin3')({
+              foo: 'bar',
+            }),
+          ]
+        }
+    `),
+    ).toEqual([
+      ['./plugin1', { foo: 'bar' }],
+      ['./plugin2', { foo: 'bar' }],
+      ['./plugin3', { foo: 'bar' }],
+    ])
+  })
+
+  test('can extract all supported data types', () => {
+    expect(
+      findStaticPlugins(js`
+        import plugin from 'plugin'
+
+        export default {
+          plugins: [
+            plugin({
+              'is-arr-mixed': [null, true, false, 1234567, 1.35, 'foo', 'bar', 'true'],
+              'is-arr': ['foo', 'bar'],
+              'is-null': null,
+              'is-true': true,
+              'is-false': false,
+              'is-int': 1234567,
+              'is-float': 1.35,
+              'is-sci': 1.35e-5,
+              'is-str-null': 'null',
+              'is-str-true': 'true',
+              'is-str-false': 'false',
+              'is-str-int': '1234567',
+              'is-str-float': '1.35',
+              'is-str-sci': '1.35e-5',
+            }),
+          ]
+        }
+    `),
+    ).toEqual([
+      [
+        'plugin',
+        {
+          'is-arr-mixed': [null, true, false, 1234567, 1.35, 'foo', 'bar', 'true'],
+          'is-arr': ['foo', 'bar'],
+          'is-null': null,
+          'is-true': true,
+          'is-false': false,
+          'is-int': 1234567,
+          'is-float': 1.35,
+          'is-sci': 1.35e-5,
+          'is-str-null': 'null',
+          'is-str-true': 'true',
+          'is-str-false': 'false',
+          'is-str-int': '1234567',
+          'is-str-float': '1.35',
+          'is-str-sci': '1.35e-5',
+        },
+      ],
+    ])
   })
 
   test('bails out on inline plugins', () => {
@@ -114,21 +217,67 @@ describe('findStaticPlugins', () => {
     ).toEqual(null)
   })
 
-  test('bails for plugins with options', () => {
+  test('bails on invalid plugin options', () => {
     expect(
       findStaticPlugins(js`
-        import plugin1 from './plugin1'
+        import plugin from './plugin'
+
+        export default {
+          plugins: [
+            plugin({ foo }),
+          ]
+        }
+    `),
+    ).toEqual(null)
+
+    expect(
+      findStaticPlugins(js`
+        import plugin from './plugin'
 
         export default {
-          plugins: [plugin1({foo:'bar'})]
+          plugins: [
+            plugin(),
+          ]
         }
       `),
     ).toEqual(null)
 
     expect(
       findStaticPlugins(js`
+        import plugin from './plugin'
+
+        export default {
+          plugins: [
+            plugin({ foo: { bar: 2 } }),
+          ]
+        }
+    `),
+    ).toEqual(null)
+
+    expect(
+      findStaticPlugins(js`
+        import plugin from './plugin'
+
+        const OPTIONS = { foo: 1 }
+
+        export default {
+          plugins: [
+            plugin(OPTIONS),
+          ]
+        }
+      `),
+    ).toEqual(null)
+
+    expect(
+      findStaticPlugins(js`
+        import plugin from './plugin'
+
+        let something = 1
+
         export default {
-          plugins: [require('@tailwindcss/typography')({foo:'bar'})]
+          plugins: [
+            plugin({ foo: something }),
+          ]
         }
     `),
     ).toEqual(null)