migrateConfig() — tailwindcss Function Reference

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

Function typescript MigrationSuite ConfigMigration calls 2 called by 1

Entity Profile

MigrationSuite→ ConfigMigration→ migrateConfig() — tailwindcss Function Reference

Dependency Diagram

graph TD
  3429a735_792d_b47b_671d_373ee445fc14["migrateConfig()"]
  b1aa79a5_bad0_a9e2_1c70_8e14489ee8dd["migrateContents()"]
  b1aa79a5_bad0_a9e2_1c70_8e14489ee8dd -->|calls| 3429a735_792d_b47b_671d_373ee445fc14
  83dc9d6e_6632_c926_0c80_4208283dda7e["relativeToStylesheet()"]
  3429a735_792d_b47b_671d_373ee445fc14 -->|calls| 83dc9d6e_6632_c926_0c80_4208283dda7e
  d11c8a9f_b670_3d0c_8d32_d1d045f1e2ae["quoteString()"]
  3429a735_792d_b47b_671d_373ee445fc14 -->|calls| d11c8a9f_b670_3d0c_8d32_d1d045f1e2ae
  style 3429a735_792d_b47b_671d_373ee445fc14 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-upgrade/src/codemods/css/migrate-config.ts lines 9–92

export function migrateConfig(
  sheet: Stylesheet,
  {
    configFilePath,
    jsConfigMigration,
  }: { configFilePath: string | null; jsConfigMigration: JSConfigMigration | null },
): Plugin {
  function migrate() {
    if (!sheet.isTailwindRoot) return
    if (!configFilePath) return

    let alreadyInjected = ALREADY_INJECTED.get(sheet)
    if (alreadyInjected && alreadyInjected.includes(configFilePath)) {
      return
    } else if (alreadyInjected) {
      alreadyInjected.push(configFilePath)
    } else {
      ALREADY_INJECTED.set(sheet, [configFilePath])
    }

    let root = sheet.root

    // We don't have a sheet with a file path
    if (!sheet.file) return

    let cssConfig = new AtRule()

    // Remove the `@config` directive if it exists and we couldn't migrate the
    // config file.
    if (jsConfigMigration !== null) {
      root.walkAtRules('config', (node) => {
        node.remove()
      })

      let css = '\n\n'
      css += '\n@tw-bucket source {'
      for (let source of jsConfigMigration.sources) {
        let absolute = path.resolve(source.base, source.pattern)
        css += `@source '${relativeToStylesheet(sheet, absolute)}';\n`
      }
      css += '}\n'

      css += '\n@tw-bucket plugin {\n'
      for (let plugin of jsConfigMigration.plugins) {
        let relative =
          plugin.path[0] === '.'
            ? relativeToStylesheet(sheet, path.resolve(plugin.base, plugin.path))
            : plugin.path

        if (plugin.options === null) {
          css += `@plugin '${relative}';\n`
        } else {
          css += `@plugin '${relative}' {\n`
          for (let [property, value] of Object.entries(plugin.options)) {
            let cssValue = ''
            if (typeof value === 'string') {
              cssValue = quoteString(value)
            } else if (Array.isArray(value)) {
              cssValue = value
                .map((v) => (typeof v === 'string' ? quoteString(v) : '' + v))
                .join(', ')
            } else {
              cssValue = '' + value
            }

            css += `  ${property}: ${cssValue};\n`
          }
          css += '}\n' // @plugin
        }
      }
      css += '}\n' // @tw-bucket

      cssConfig.append(postcss.parse(css + jsConfigMigration.css))
    }

    // Inject the `@config` directive
    root.append(cssConfig.nodes)
  }

  return {
    postcssPlugin: '@tailwindcss/upgrade/migrate-config',
    OnceExit: migrate,
  }
}