Resolve imports from CSS file

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Ensure `flex` is suggested ([#15014](https://github.com/tailwindlabs/tailwindcss/pull/15014))
+- _Upgrade (experimental)_: Resolve imports from passed CSS file(s) ([#15010](https://github.com/tailwindlabs/tailwindcss/pull/15010))
 
 ### Changed
 

integrations/upgrade/index.test.ts

@@ -239,7 +239,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
-            "tailwindcss": "workspace:^",
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -1000,14 +1000,14 @@ test(
       'package.json': json`
         {
           "dependencies": {
-            "tailwindcss": "workspace:^",
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
       `,
       'tailwind.config.js': js`module.exports = {}`,
       'src/index.css': css`
-        @import 'tailwindcss';
+        @import 'tailwindcss/tailwind.css';
         @import './utilities.css' layer(utilities);
       `,
       'src/utilities.css': css`
@@ -1069,7 +1069,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
-            "tailwindcss": "workspace:^",
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -1123,7 +1123,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
-            "tailwindcss": "workspace:^",
+            "tailwindcss": "^3",
             "@tailwindcss/cli": "workspace:^",
             "@tailwindcss/upgrade": "workspace:^"
           }
@@ -1310,7 +1310,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
-            "tailwindcss": "workspace:^",
+            "tailwindcss": "^3",
             "@tailwindcss/cli": "workspace:^",
             "@tailwindcss/upgrade": "workspace:^"
           }
@@ -1376,6 +1376,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -1435,7 +1436,7 @@ test(
       'src/root.5.css': css`@import './root.5/tailwind.css';`,
       'src/root.5/tailwind.css': css`
         /* Inject missing @config in this file, due to full import */
-        @import 'tailwindcss';
+        @import 'tailwindcss/tailwind.css';
       `,
     },
   },
@@ -1871,7 +1872,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
-            "tailwindcss": "workspace:^",
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -1933,7 +1934,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
-            "tailwindcss": "workspace:^",
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           }
         }
@@ -2017,7 +2018,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
-            "tailwindcss": "workspace:^",
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           },
           "devDependencies": {
@@ -2047,7 +2048,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
-            "tailwindcss": "^3.4.14",
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           },
           "devDependencies": {
@@ -2152,7 +2153,7 @@ test(
       'package.json': json`
         {
           "dependencies": {
-            "tailwindcss": "^3.4.14",
+            "tailwindcss": "^3",
             "@tailwindcss/upgrade": "workspace:^"
           },
           "devDependencies": {
@@ -2236,3 +2237,125 @@ test(
     `)
   },
 )
+
+test(
+  'passing in a single CSS file should resolve all imports and migrate them',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "^3",
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'tailwind.config.js': js`module.exports = {}`,
+      'src/index.css': css`
+        @import './base.css';
+        @import './components.css';
+        @import './utilities.css';
+        @import './generated/ignore-me.css';
+      `,
+      'src/generated/.gitignore': `
+        *
+        !.gitignore
+      `,
+      'src/generated/ignore-me.css': css`
+        /* This should not be converted */
+        @layer utilities {
+          .ignore-me {
+            color: red;
+          }
+        }
+      `,
+      'src/base.css': css`@import 'tailwindcss/base';`,
+      'src/components.css': css`
+        @import './typography.css';
+        @layer components {
+          .foo {
+            color: red;
+          }
+        }
+        @tailwind components;
+      `,
+      'src/utilities.css': css`
+        @layer utilities {
+          .bar {
+            color: blue;
+          }
+        }
+        @tailwind utilities;
+      `,
+      'src/typography.css': css`
+        @layer components {
+          .typography {
+            color: red;
+          }
+        }
+      `,
+    },
+  },
+  async ({ exec, fs }) => {
+    await exec('npx @tailwindcss/upgrade ./src/index.css')
+
+    expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
+      "
+      --- ./src/index.css ---
+      @import './base.css';
+      @import './components.css';
+      @import './utilities.css';
+      @import './generated/ignore-me.css';
+
+      --- ./src/base.css ---
+      @import 'tailwindcss/theme' layer(theme);
+      @import 'tailwindcss/preflight' layer(base);
+
+      /*
+        The default border color has changed to \`currentColor\` in Tailwind CSS v4,
+        so we've added these compatibility styles to make sure everything still
+        looks the same as it did with Tailwind CSS v3.
+
+        If we ever want to remove these styles, we need to add an explicit border
+        color utility to any element that depends on these defaults.
+      */
+      @layer base {
+        *,
+        ::after,
+        ::before,
+        ::backdrop,
+        ::file-selector-button {
+          border-color: var(--color-gray-200, currentColor);
+        }
+      }
+
+      --- ./src/components.css ---
+      @import './typography.css';
+
+      @utility foo {
+        color: red;
+      }
+
+      --- ./src/typography.css ---
+      @utility typography {
+        color: red;
+      }
+
+      --- ./src/utilities.css ---
+      @import 'tailwindcss/utilities' layer(utilities);
+
+      @utility bar {
+        color: blue;
+      }
+
+      --- ./src/generated/ignore-me.css ---
+      /* This should not be converted */
+      @layer utilities {
+        .ignore-me {
+          color: red;
+        }
+      }
+      "
+    `)
+  },
+)

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

@@ -1,9 +1,10 @@
 #!/usr/bin/env node
 
-import { globby } from 'globby'
+import { globby, isGitIgnored } from 'globby'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import postcss from 'postcss'
+import atImport from 'postcss-import'
 import { formatNodes } from './codemods/format-nodes'
 import { sortBuckets } from './codemods/sort-buckets'
 import { help } from './commands/help'
@@ -67,9 +68,7 @@ async function run() {
 
     // Discover CSS files in case no files were provided
     if (files.length === 0) {
-      info(
-        'No input stylesheets provided. Searching for CSS files in the current directory and its subdirectories…',
-      )
+      info('Searching for CSS files in the current directory and its subdirectories…')
 
       files = await globby(['**/*.css'], {
         absolute: true,
@@ -80,19 +79,44 @@ async function run() {
     // Ensure we are only dealing with CSS files
     files = files.filter((file) => file.endsWith('.css'))
 
-    // Analyze the stylesheets
-    let loadResults = await Promise.allSettled(files.map((filepath) => Stylesheet.load(filepath)))
+    // Load the stylesheets and their imports
+    let sheetsByFile = new Map<string, Stylesheet>()
+    let isIgnored = await isGitIgnored()
+    let queue = files.slice()
+    while (queue.length > 0) {
+      let file = queue.shift()!
 
-    // Load and parse all stylesheets
-    for (let result of loadResults) {
-      if (result.status === 'rejected') {
-        error(`${result.reason}`)
+      // Already handled
+      if (sheetsByFile.has(file)) continue
+
+      // We don't want to process ignored files (like node_modules)
+      if (isIgnored(file)) continue
+
+      let sheet = await Stylesheet.load(file).catch((e) => {
+        error(`${e}`)
+        return null
+      })
+      if (!sheet) continue
+
+      // Track the sheet by its file
+      sheetsByFile.set(file, sheet)
+
+      // We process the stylesheet which will also process its imports and
+      // inline everything. We still want to handle the imports separately, so
+      // we just use the postcss-import messages to find the imported files.
+      //
+      // We can't use the `sheet.root` directly because this will mutate the
+      // `sheet.root`
+      let processed = await postcss().use(atImport()).process(sheet.root.toString(), { from: file })
+
+      for (let msg of processed.messages) {
+        if (msg.type === 'dependency' && msg.plugin === 'postcss-import') {
+          queue.push(msg.file)
+        }
       }
     }
 
-    let stylesheets = loadResults
-      .filter((result) => result.status === 'fulfilled')
-      .map((result) => result.value)
+    let stylesheets = Array.from(sheetsByFile.values())
 
     // Analyze the stylesheets
     try {