migrateDarkMode() — tailwindcss Function Reference

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

Function typescript NodeInterface Compilation calls 1 called by 1

Entity Profile

NodeInterface→ Compilation→ migrateDarkMode() — tailwindcss Function Reference

Dependency Diagram

graph TD
  21f09a58_fd09_6e62_c29b_83d25c06d9aa["migrateDarkMode()"]
  8d0812d4_61e4_e939_916d_a33e94faf43f["migrateJsConfig()"]
  8d0812d4_61e4_e939_916d_a33e94faf43f -->|calls| 21f09a58_fd09_6e62_c29b_83d25c06d9aa
  9b1c5b30_fc55_6181_32ba_e2e10815b375["darkModePlugin()"]
  21f09a58_fd09_6e62_c29b_83d25c06d9aa -->|calls| 9b1c5b30_fc55_6181_32ba_e2e10815b375
  style 21f09a58_fd09_6e62_c29b_83d25c06d9aa 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 ''
}