Upgrade: Handle darkMode value with block syntax

Author: philipp-spiess

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Don’t replace `_` in suggested theme keys ([#16433](https://github.com/tailwindlabs/tailwindcss/pull/16433))
 - Ensure `--default-outline-width` can be used to change the `outline-width` value of the `outline` utility
 - Ensure drop shadow utilities don't inherit unexpectedly ([#16471](https://github.com/tailwindlabs/tailwindcss/pull/16471))
+- 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({

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