Migrate static plugins with options to CSS

Author: philipp-spiess

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Added
+
+- _Upgrade (experimental)_: Migrate `plugins` with options to CSS ([#14700](https://github.com/tailwindlabs/tailwindcss/pull/14700))
 
 ## [4.0.0-alpha.28] - 2024-10-17
 

integrations/upgrade/index.test.ts

@@ -40,8 +40,6 @@ test(
 
       --- ./src/input.css ---
       @import 'tailwindcss';
-
-      @source './**/*.{html,js}';
       "
     `)
 
@@ -100,8 +98,6 @@ test(
       --- ./src/input.css ---
       @import 'tailwindcss' prefix(tw);
 
-      @source './**/*.{html,js}';
-
       .btn {
         @apply tw:rounded-md! tw:px-2 tw:py-1 tw:bg-blue-500 tw:text-white;
       }

integrations/upgrade/js-config.test.ts

@@ -82,9 +82,6 @@ test(
       --- src/input.css ---
       @import 'tailwindcss';
 
-      @source './**/*.{html,js}';
-      @source '../my-app/**/*.{html,js}';
-
       @variant dark (&:where(.dark, .dark *));
 
       @theme {
@@ -155,14 +152,33 @@ test(
         import customPlugin from './custom-plugin'
 
         export default {
-          plugins: [typography, customPlugin],
+          plugins: [
+            typography,
+            customPlugin({
+              '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',
+              'is-arr': ['foo', 'bar'],
+              'is-arr-mixed': [null, true, false, 1234567, 1.35, 'foo', 'bar', 'true'],
+            }),
+          ],
         } 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;
@@ -178,15 +194,38 @@ test(
       "
       --- src/input.css ---
       @import 'tailwindcss';
-
-      @plugin '@tailwindcss/typography';
-      @plugin '../custom-plugin';
+      @config '../tailwind.config.ts';
       "
     `)
 
     expect(await fs.dumpFiles('tailwind.config.ts')).toMatchInlineSnapshot(`
       "
+      --- tailwind.config.ts ---
+      import { type Config } from 'tailwindcss'
+      import typography from '@tailwindcss/typography'
+      import customPlugin from './custom-plugin'
 
+      export default {
+        plugins: [
+          typography,
+          customPlugin({
+            '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',
+            'is-arr': ['foo', 'bar'],
+            'is-arr-mixed': [null, true, false, 1234567, 1.35, 'foo', 'bar', 'true'],
+          }),
+        ],
+      } satisfies Config
       "
     `)
   },

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,27 @@ 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)) {
+            let cssValue = ''
+            if (typeof value === 'string') {
+              cssValue = quoteString(value)
+            } else if (Array.isArray(value)) {
+              cssValue = value
+                .map((v) => (typeof v === 'string' ? quoteString(v) : '' + v))
+                .join(', ')
+            } else {
+              cssValue = '' + value
+            }
+
+            css += `  ${property}: ${cssValue};\n`
+          }
+          css += '}\n'
+        }
       }
       if (jsConfigMigration.plugins.length > 0) {
         css = css + '\n'
@@ -149,3 +169,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 | StaticPluginOptions }[]
     css: string
   }