migrateDarkMode() — tailwindcss Function Reference

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

Function typescript UpgradeToolkit Codemods calls 1 called by 1

Entity Profile

UpgradeToolkit→ Codemods→ migrateDarkMode() — tailwindcss Function Reference

Dependency Diagram

graph TD
  450b80ee_7984_6c4f_fde3_a6c52f03baad["migrateDarkMode()"]
  b2ba3368_7330_fe20_4543_9cafa8cfedc0["migrate-js-config.ts"]
  450b80ee_7984_6c4f_fde3_a6c52f03baad -->|defined in| b2ba3368_7330_fe20_4543_9cafa8cfedc0
  1ef01211_e07d_fbec_dcb1_d3c7a3bfe061["migrateJsConfig()"]
  1ef01211_e07d_fbec_dcb1_d3c7a3bfe061 -->|calls| 450b80ee_7984_6c4f_fde3_a6c52f03baad
  54520652_a882_0664_f2a1_5ea7cdd9fd2f["darkModePlugin()"]
  450b80ee_7984_6c4f_fde3_a6c52f03baad -->|calls| 54520652_a882_0664_f2a1_5ea7cdd9fd2f
  style 450b80ee_7984_6c4f_fde3_a6c52f03baad 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 ''
}