migrateDarkMode() — tailwindcss Function Reference

Architecture documentation for the migrateDarkMode() function in migrate-js-config.ts from the tailwindcss codebase.

Function typescript MigrationSuite ConfigMigration calls 1 called by 1

Entity Profile

MigrationSuite→ ConfigMigration→ migrateDarkMode() — tailwindcss Function Reference

Dependency Diagram

graph TD
  2f11a653_1ddf_d37a_b002_85288f586aba["migrateDarkMode()"]
  dc1d7e71_14d1_dd51_5d14_8265f9e59cce["migrateJsConfig()"]
  dc1d7e71_14d1_dd51_5d14_8265f9e59cce -->|calls| 2f11a653_1ddf_d37a_b002_85288f586aba
  db0c22c6_d281_c194_8626_77a3777ce5b8["darkModePlugin()"]
  2f11a653_1ddf_d37a_b002_85288f586aba -->|calls| db0c22c6_d281_c194_8626_77a3777ce5b8
  style 2f11a653_1ddf_d37a_b002_85288f586aba fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts lines 292–325

function migrateDarkMode(unresolvedConfig: Config & { darkMode: any }): string {
  let variant: string | string[] = ''
  let addVariant = (_name: string, _variant: string) => (variant = _variant)
  let config = () => unresolvedConfig.darkMode
  darkModePlugin({ config, addVariant })

  if (variant === '') {
    return ''
  }

  if (!Array.isArray(variant)) {
    variant = [variant]
  }

  if (variant.length === 1 && !variant[0].includes('{')) {
    return `\n@tw-bucket custom-variant {\n@custom-variant dark (${variant[0]});\n}\n`
  }

  let customVariant = ''
  for (let variantName of variant) {
    // Convert to the block syntax if a block is used
    if (variantName.includes('{')) {
      customVariant += variantName.replace('}', '{ @slot }}') + '\n'
    } else {
      customVariant += variantName + '{ @slot }\n'
    }
  }

  if (customVariant !== '') {
    return `\n@tw-bucket custom-variant {\n@custom-variant dark {${customVariant}};\n}\n`
  }

  return ''
}