Track parent/child relationships across stylesheets

CSS files may be imported and we’ll need to know what files import other files in order to unlock more advanced transformations

Author: thecrypticace

packages/@tailwindcss-upgrade/src/index.ts

@@ -6,7 +6,7 @@ import path from 'node:path'
 import postcss from 'postcss'
 import { formatNodes } from './codemods/format-nodes'
 import { help } from './commands/help'
-import { migrate as migrateStylesheet } from './migrate'
+import { analyze as analyzeStylesheets, migrate as migrateStylesheet } from './migrate'
 import { migratePostCSSConfig } from './migrate-postcss'
 import { Stylesheet } from './stylesheet'
 import { migrate as migrateTemplate } from './template/migrate'
@@ -112,6 +112,13 @@ async function run() {
       .filter((result) => result.status === 'fulfilled')
       .map((result) => result.value)
 
+    // Analyze the stylesheets
+    try {
+      await analyzeStylesheets(stylesheets)
+    } catch (e: unknown) {
+      error(`${e}`)
+    }
+
     // Migrate each file
     let migrateResults = await Promise.allSettled(
       stylesheets.map((sheet) => migrateStylesheet(sheet, config)),

packages/@tailwindcss-upgrade/src/migrate.ts

@@ -1,3 +1,4 @@
+import path from 'node:path'
 import postcss from 'postcss'
 import type { Config } from 'tailwindcss'
 import type { DesignSystem } from '../../tailwindcss/src/design-system'
@@ -7,6 +8,7 @@ import { migrateMediaScreen } from './codemods/migrate-media-screen'
 import { migrateMissingLayers } from './codemods/migrate-missing-layers'
 import { migrateTailwindDirectives } from './codemods/migrate-tailwind-directives'
 import { Stylesheet } from './stylesheet'
+import { resolveCssId } from './utils/resolve'
 
 export interface MigrateOptions {
   newPrefix: string | null
@@ -40,3 +42,68 @@ export async function migrate(stylesheet: Stylesheet, options: MigrateOptions) {
 
   await migrateContents(stylesheet, options)
 }
+
+export async function analyze(stylesheets: Stylesheet[]) {
+  let stylesheetsByFile = new Map<string, Stylesheet>()
+
+  for (let sheet of stylesheets) {
+    if (sheet.file) {
+      stylesheetsByFile.set(sheet.file, sheet)
+    }
+  }
+
+  // Step 1: Record which `@import` rules point to which stylesheets
+  // and which stylesheets are parents/children of each other
+  let processor = postcss([
+    {
+      postcssPlugin: 'mark-import-nodes',
+      AtRule: {
+        import(node) {
+          // Find what the import points to
+          let id = node.params.match(/['"](.*)['"]/)?.[1]
+          if (!id) return
+
+          let basePath = node.source?.input.file
+            ? path.dirname(node.source.input.file)
+            : process.cwd()
+
+          // Resolve the import to a file path
+          let resolvedPath: string | false
+          try {
+            resolvedPath = resolveCssId(id, basePath)
+          } catch (err) {
+            console.warn(`Failed to resolve import: ${id}. Skipping.`)
+            console.error(err)
+            return
+          }
+
+          if (!resolvedPath) return
+
+          // Find the stylesheet pointing to the resolved path
+          let stylesheet = stylesheetsByFile.get(resolvedPath)
+
+          // If it _does not_ exist in stylesheets we don't care and skip it
+          // this is likely because its in node_modules or a workspace package
+          // that we don't want to modify
+          if (!stylesheet) return
+
+          let parent = node.source?.input.file
+            ? stylesheetsByFile.get(node.source.input.file)
+            : undefined
+
+          // Connect sheets together in a dependency graph
+          if (parent) {
+            stylesheet.parents.add(parent)
+            parent.children.add(stylesheet)
+          }
+        },
+      },
+    },
+  ])
+
+  for (let sheet of stylesheets) {
+    if (!sheet.file) continue
+
+    await processor.process(sheet.root, { from: sheet.file })
+  }
+}

packages/@tailwindcss-upgrade/src/stylesheet.ts

@@ -5,7 +5,18 @@ import * as postcss from 'postcss'
 
 export type StylesheetId = string
 
+export interface StylesheetConnection {
+  item: Stylesheet
+}
+
 export class Stylesheet {
+  /**
+   * A unique identifier for this stylesheet
+   *
+   * Used to track the stylesheet in PostCSS nodes.
+   */
+  id: StylesheetId
+
   /**
    * The PostCSS AST that represents this stylesheet.
    */
@@ -18,6 +29,16 @@ export class Stylesheet {
    */
   file: string | null = null
 
+  /**
+   * Stylesheets that import this stylesheet.
+   */
+  parents = new Set<StylesheetConnection>()
+
+  /**
+   * Stylesheets that are imported by stylesheet.
+   */
+  children = new Set<StylesheetConnection>()
+
   static async load(filepath: string) {
     filepath = path.resolve(process.cwd(), filepath)
 
@@ -38,14 +59,45 @@ export class Stylesheet {
   }
 
   constructor(root: postcss.Root, file?: string) {
+    this.id = Math.random().toString(36).slice(2)
     this.root = root
     this.file = file ?? null
   }
 
+  *ancestors() {
+    for (let { item } of walkDepth(this, (sheet) => sheet.parents)) {
+      yield item
+    }
+  }
+
+  *descendants() {
+    for (let { item } of walkDepth(this, (sheet) => sheet.children)) {
+      yield item
+    }
+  }
+
   [util.inspect.custom]() {
     return {
       ...this,
       root: this.root.toString(),
+      parents: Array.from(this.parents, (s) => s.item.id),
+      children: Array.from(this.children, (s) => s.item.id),
+    }
+  }
+}
+
+function* walkDepth(
+  value: Stylesheet,
+  connections: (value: Stylesheet) => Iterable<StylesheetConnection>,
+  path: StylesheetConnection[] = [],
+): Iterable<{ item: Stylesheet; path: StylesheetConnection[] }> {
+  for (let connection of connections(value)) {
+    let newPath = [...path, connection]
+
+    yield* walkDepth(connection.item, connections, newPath)
+    yield {
+      item: connection.item,
+      path: newPath,
     }
   }
 }