migrateConfig() — tailwindcss Function Reference

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

Function typescript CommandLineInterface Codemods calls 2 called by 1

Entity Profile

CommandLineInterface→ Codemods→ migrateConfig() — tailwindcss Function Reference

Dependency Diagram

graph TD
  c87008df_39ed_c25f_fb59_02588e73a2f7["migrateConfig()"]
  6685d9c3_9ea1_062b_c4b3_737d22eefe98["migrate-config.ts"]
  c87008df_39ed_c25f_fb59_02588e73a2f7 -->|defined in| 6685d9c3_9ea1_062b_c4b3_737d22eefe98
  1be562b7_fe23_7e22_03ec_31b3d101e5e5["migrateContents()"]
  1be562b7_fe23_7e22_03ec_31b3d101e5e5 -->|calls| c87008df_39ed_c25f_fb59_02588e73a2f7
  d09344df_f73f_81c5_9800_c997f2e4f793["relativeToStylesheet()"]
  c87008df_39ed_c25f_fb59_02588e73a2f7 -->|calls| d09344df_f73f_81c5_9800_c997f2e4f793
  049fed97_c7d6_441b_6fb3_29e591376f20["quoteString()"]
  c87008df_39ed_c25f_fb59_02588e73a2f7 -->|calls| 049fed97_c7d6_441b_6fb3_29e591376f20
  style c87008df_39ed_c25f_fb59_02588e73a2f7 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',