Migrate static plugins with options to CSS

Author: philipp-spiess

integrations/upgrade/js-config.test.ts

@@ -106,7 +106,7 @@ test(
 
         --font-family-sans: Inter, system-ui, sans-serif;
         --font-family-display: Cabinet Grotesk, ui-sans-serif, system-ui, sans-serif,
-          "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+          'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
         --radius-4xl: 2rem;
 
@@ -155,14 +155,21 @@ test(
         import customPlugin from './custom-plugin'
 
         export default {
-          plugins: [typography, customPlugin],
+          plugins: [
+            typography,
+            customPlugin({
+              string: 'class',
+              number: 19,
+            }),
+          ],
         } satisfies Config
       `,
       'custom-plugin.js': ts`
-        export default function ({ addVariant }) {
+        import plugin from 'tailwindcss/plugin'
+        export default plugin.withOptions((_options) => ({ addVariant }) => {
           addVariant('inverted', '@media (inverted-colors: inverted)')
           addVariant('hocus', ['&:focus', '&:hover'])
-        }
+        })
       `,
       'src/input.css': css`
         @tailwind base;
@@ -180,7 +187,10 @@ test(
       @import 'tailwindcss';
 
       @plugin '@tailwindcss/typography';
-      @plugin '../custom-plugin';
+      @plugin '../custom-plugin' {
+        string: 'class';
+        number: 19;
+      }
       "
     `)
 

packages/@tailwindcss-upgrade/src/codemods/format-nodes.ts

@@ -18,7 +18,15 @@ export function formatNodes(): Plugin {
     // Format the nodes
     await Promise.all(
       nodesToFormat.map(async (node) => {
-        node.replaceWith(parse(await format(node.toString(), { parser: 'css', semi: true })))
+        node.replaceWith(
+          parse(
+            await format(node.toString(), {
+              parser: 'css',
+              semi: true,
+              singleQuote: true,
+            }),
+          ),
+        )
       }),
     )
   }

packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.test.ts

@@ -413,7 +413,7 @@ it('should migrate classes with attribute selectors', async () => {
     `),
   ).toMatchInlineSnapshot(`
     "@utility no-scrollbar {
-      &[data-checked=""] {
+      &[data-checked=''] {
         display: none;
       }
     }"

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

@@ -63,7 +63,16 @@ export function migrateConfig(
           plugin.path[0] === '.'
             ? relativeToStylesheet(sheet, path.resolve(plugin.base, plugin.path))
             : plugin.path
-        css += `@plugin '${relative}';\n`
+
+        if (plugin.options === null) {
+          css += `@plugin '${relative}';\n`
+        } else {
+          css += `@plugin '${relative}' {\n`
+          for (let [property, value] of Object.entries(plugin.options)) {
+            css += `  ${property}: ${typeof value === 'string' ? quoteString(value) : value};\n`
+          }
+          css += '}\n'
+        }
       }
       if (jsConfigMigration.plugins.length > 0) {
         css = css + '\n'
@@ -149,3 +158,7 @@ function relativeToStylesheet(sheet: Stylesheet, absolute: string) {
   // glob.
   return normalizePath(relative)
 }
+
+function quoteString(value: string): string {
+  return `'${value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`
+}

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

@@ -24,7 +24,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 }[]
+    plugins: { base: string; path: string; options: null | Record<string, string | number> }[]
     css: string
   }