Upgrade: Handle darkMode value with block syntax

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure drop shadow utilities don't inherit unexpectedly ([#16471](https://github.com/tailwindlabs/tailwindcss/pull/16471))
 - Export backwards compatible config and plugin types from `tailwindcss/plugin` ([#16505](https://github.com/tailwindlabs/tailwindcss/pull/16505))
 - Upgrade: Report errors when updating dependencies ([#16504](https://github.com/tailwindlabs/tailwindcss/pull/16504))
+- Upgrade: Ensure a `darkMode` JS config setting with block syntax converts to use `@slot` ([#16507](https://github.com/tailwindlabs/tailwindcss/pull/16507))
 
 ## [4.0.6] - 2025-02-10
 

integrations/upgrade/js-config.test.ts

@@ -318,6 +318,7 @@ test(
         import customPlugin from './custom-plugin'
 
         export default {
+          darkMode: ['variant', '@media not print { .dark & }'],
           plugins: [
             typography,
             customPlugin({
@@ -379,6 +380,14 @@ test(
         is-arr-mixed: null, true, false, 1234567, 1.35, 'foo', 'bar', 'true';
       }
 
+      @custom-variant dark {
+        @media not print {
+          .dark & {
+            @slot;
+          }
+        }
+      }
+
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
         so we've added these compatibility styles to make sure everything still

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

@@ -196,15 +196,36 @@ async function migrateTheme(
 }
 
 function migrateDarkMode(unresolvedConfig: Config & { darkMode: any }): string {
-  let variant: string = ''
+  let variant: string | string[] = ''
   let addVariant = (_name: string, _variant: string) => (variant = _variant)
   let config = () => unresolvedConfig.darkMode
   darkModePlugin({ config, addVariant })
 
   if (variant === '') {
     return ''
   }
-  return `\n@tw-bucket custom-variant {\n@custom-variant dark (${variant});\n}\n`
+
+  if (!Array.isArray(variant)) {
+    variant = [variant]
+  }
+
+  let output = ''
+
+  for (let variantName of variant) {
+    if (variantName === 'class') {
+      continue
+    }
+
+    // Convert to the block syntax if a block is used
+    if (variantName.includes('{')) {
+      variantName = variantName.replace('}', '{ @slot }}')
+      output += `\n@tw-bucket custom-variant {\n@custom-variant dark {${variantName}}}\n`
+    } else {
+      output += `\n@tw-bucket custom-variant {\n@custom-variant dark (${variantName});\n}\n`
+    }
+  }
+
+  return output
 }
 
 // Returns a string identifier used to section theme declarations