migrateConfig() — tailwindcss Function Reference

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

Function typescript UpgradeToolkit Codemods calls 2 called by 1

Entity Profile

UpgradeToolkit→ Codemods→ migrateConfig() — tailwindcss Function Reference

Dependency Diagram

graph TD
  01e3d6cc_7bef_47f3_8be8_b38c34fd3653["migrateConfig()"]
  deadb2f6_312c_a055_6892_b63958628b61["migrate-config.ts"]
  01e3d6cc_7bef_47f3_8be8_b38c34fd3653 -->|defined in| deadb2f6_312c_a055_6892_b63958628b61
  9ebd84f7_07bc_9b19_28a7_8bd93119c37e["migrateContents()"]
  9ebd84f7_07bc_9b19_28a7_8bd93119c37e -->|calls| 01e3d6cc_7bef_47f3_8be8_b38c34fd3653
  0ca5b8d3_5f4b_b978_a42f_1a4289d904b8["relativeToStylesheet()"]
  01e3d6cc_7bef_47f3_8be8_b38c34fd3653 -->|calls| 0ca5b8d3_5f4b_b978_a42f_1a4289d904b8
  fa7f1be0_8a59_e8fc_63cf_f850d4f7bfdf["quoteString()"]
  01e3d6cc_7bef_47f3_8be8_b38c34fd3653 -->|calls| fa7f1be0_8a59_e8fc_63cf_f850d4f7bfdf
  style 01e3d6cc_7bef_47f3_8be8_b38c34fd3653 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',