Resolve @import in core

CHANGELOG.md

@@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Disallow negative bare values in core utilities and variants ([#14453](https://github.com/tailwindlabs/tailwindcss/pull/14453))
 - Preserve explicit shadow color when overriding shadow size ([#14458](https://github.com/tailwindlabs/tailwindcss/pull/14458))
 - Preserve explicit transition duration and timing function when overriding transition property ([#14490](https://github.com/tailwindlabs/tailwindcss/pull/14490))
+- Change the implementation for `@import` resolution to speed up initial builds ([#14446](https://github.com/tailwindlabs/tailwindcss/pull/14446))
 
 ## [4.0.0-alpha.24] - 2024-09-11
 

integrations/postcss/index.test.ts

@@ -79,6 +79,86 @@ test(
   },
 )
 
+test(
+  'production build with `postcss-import` (string)',
+  {
+    fs: {
+      'package.json': json`{}`,
+      'pnpm-workspace.yaml': yaml`
+        #
+        packages:
+          - project-a
+      `,
+      'project-a/package.json': json`
+        {
+          "dependencies": {
+            "postcss": "^8",
+            "postcss-cli": "^10",
+            "postcss-import": "^16",
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/postcss": "workspace:^"
+          }
+        }
+      `,
+      'project-a/postcss.config.js': js`
+        module.exports = {
+          plugins: {
+            'postcss-import': {},
+            '@tailwindcss/postcss': {},
+          },
+        }
+      `,
+      'project-a/index.html': html`
+        <div
+          class="underline 2xl:font-bold hocus:underline inverted:flex"
+        ></div>
+      `,
+      'project-a/plugin.js': js`
+        module.exports = function ({ addVariant }) {
+          addVariant('inverted', '@media (inverted-colors: inverted)')
+          addVariant('hocus', ['&:focus', '&:hover'])
+        }
+      `,
+      'project-a/tailwind.config.js': js`
+        module.exports = {
+          content: ['../project-b/src/**/*.js'],
+        }
+      `,
+      'project-a/src/index.css': css`
+        @import 'tailwindcss/utilities';
+        @config '../tailwind.config.js';
+        @source '../../project-b/src/**/*.html';
+        @plugin '../plugin.js';
+      `,
+      'project-a/src/index.js': js`
+        const className = "content-['a/src/index.js']"
+        module.exports = { className }
+      `,
+      'project-b/src/index.html': html`
+        <div class="flex" />
+      `,
+      'project-b/src/index.js': js`
+        const className = "content-['b/src/index.js']"
+        module.exports = { className }
+      `,
+    },
+  },
+  async ({ root, fs, exec }) => {
+    await exec('pnpm postcss src/index.css --output dist/out.css', {
+      cwd: path.join(root, 'project-a'),
+    })
+
+    await fs.expectFileToContain('project-a/dist/out.css', [
+      candidate`underline`,
+      candidate`flex`,
+      candidate`content-['a/src/index.js']`,
+      candidate`content-['b/src/index.js']`,
+      candidate`inverted:flex`,
+      candidate`hocus:underline`,
+    ])
+  },
+)
+
 test(
   'production build (ESM)',
   {

packages/@tailwindcss-cli/package.json

@@ -36,12 +36,6 @@
     "lightningcss": "catalog:",
     "mri": "^1.2.0",
     "picocolors": "^1.0.1",
-    "postcss-import": "^16.1.0",
-    "postcss": "^8.4.41",
     "tailwindcss": "workspace:^"
-  },
-  "devDependencies": {
-    "@types/postcss-import": "^14.0.3",
-    "internal-postcss-fix-relative-paths": "workspace:^"
   }
 }

packages/@tailwindcss-cli/src/commands/build/index.ts

@@ -2,13 +2,10 @@ import watcher from '@parcel/watcher'
 import { compile } from '@tailwindcss/node'
 import { clearRequireCache } from '@tailwindcss/node/require-cache'
 import { Scanner, type ChangedContent } from '@tailwindcss/oxide'
-import fixRelativePathsPlugin from 'internal-postcss-fix-relative-paths'
 import { Features, transform } from 'lightningcss'
-import { existsSync, readFileSync } from 'node:fs'
+import { existsSync } from 'node:fs'
 import fs from 'node:fs/promises'
 import path from 'node:path'
-import postcss from 'postcss'
-import atImport from 'postcss-import'
 import type { Arg, Result } from '../../utils/args'
 import { Disposables } from '../../utils/disposables'
 import {
@@ -19,7 +16,6 @@ import {
   println,
   relative,
 } from '../../utils/renderer'
-import { resolveCssId } from '../../utils/resolve'
 import { drainStdin, outputFile } from './utils'
 
 const css = String.raw
@@ -83,17 +79,13 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
 
   let start = process.hrtime.bigint()
 
-  // Resolve the input
-  let [input, cssImportPaths] = await handleImports(
-    args['--input']
-      ? args['--input'] === '-'
-        ? await drainStdin()
-        : await fs.readFile(args['--input'], 'utf-8')
-      : css`
-          @import 'tailwindcss';
-        `,
-    args['--input'] ?? base,
-  )
+  let input = args['--input']
+    ? args['--input'] === '-'
+      ? await drainStdin()
+      : await fs.readFile(args['--input'], 'utf-8')
+    : css`
+        @import 'tailwindcss';
+      `
 
   let previous = {
     css: '',
@@ -128,7 +120,7 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
 
   let inputFile = args['--input'] && args['--input'] !== '-' ? args['--input'] : process.cwd()
   let inputBasePath = path.dirname(path.resolve(inputFile))
-  let fullRebuildPaths: string[] = cssImportPaths.slice()
+  let fullRebuildPaths: string[] = []
 
   function createCompiler(css: string) {
     return compile(css, {
@@ -143,12 +135,7 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
   let compiler = await createCompiler(input)
   let scanner = new Scanner({
     detectSources: { base },
-    sources: compiler.globs.map(({ origin, pattern }) => ({
-      // Ensure the glob is relative to the input CSS file or the config file
-      // where it is specified.
-      base: origin ? path.dirname(path.resolve(inputBasePath, origin)) : inputBasePath,
-      pattern,
-    })),
+    sources: compiler.globs,
   })
 
   // Watch for changes
@@ -196,30 +183,24 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
             // Clear all watchers
             cleanupWatchers()
 
-            // Collect the new `input` and `cssImportPaths`.
-            ;[input, cssImportPaths] = await handleImports(
-              args['--input']
-                ? await fs.readFile(args['--input'], 'utf-8')
-                : css`
-                    @import 'tailwindcss';
-                  `,
-              args['--input'] ?? base,
-            )
+            // Read the new `input`.
+            let input = args['--input']
+              ? args['--input'] === '-'
+                ? await drainStdin()
+                : await fs.readFile(args['--input'], 'utf-8')
+              : css`
+                  @import 'tailwindcss';
+                `
             clearRequireCache(resolvedFullRebuildPaths)
-            fullRebuildPaths = cssImportPaths.slice()
+            fullRebuildPaths = []
 
             // Create a new compiler, given the new `input`
             compiler = await createCompiler(input)
 
             // Re-scan the directory to get the new `candidates`
             scanner = new Scanner({
               detectSources: { base },
-              sources: compiler.globs.map(({ origin, pattern }) => ({
-                // Ensure the glob is relative to the input CSS file or the
-                // config file where it is specified.
-                base: origin ? path.dirname(path.resolve(inputBasePath, origin)) : inputBasePath,
-                pattern,
-              })),
+              sources: compiler.globs,
             })
 
             // Scan the directory for candidates
@@ -367,51 +348,6 @@ async function createWatchers(dirs: string[], cb: (files: string[]) => void) {
   }
 }
 
-function handleImports(
-  input: string,
-  file: string,
-): [css: string, paths: string[]] | Promise<[css: string, paths: string[]]> {
-  // TODO: Should we implement this ourselves instead of relying on PostCSS?
-  //
-  // Relevant specification:
-  //   - CSS Import Resolve: https://csstools.github.io/css-import-resolve/
-
-  if (!input.includes('@import')) {
-    return [input, [file]]
-  }
-
-  return postcss()
-    .use(
-      atImport({
-        resolve(id, basedir) {
-          let resolved = resolveCssId(id, basedir)
-          if (!resolved) {
-            throw new Error(`Could not resolve ${id} from ${basedir}`)
-          }
-          return resolved
-        },
-        load(id) {
-          // We need to synchronously read the file here because when bundled
-          // with bun, some of the ids might resolve to files inside the bun
-          // embedded files root which can only be read by `node:fs` and not
-          // `node:fs/promises`.
-          return readFileSync(id, 'utf-8')
-        },
-      }),
-    )
-    .use(fixRelativePathsPlugin())
-    .process(input, { from: file })
-    .then((result) => [
-      result.css,
-
-      // Use `result.messages` to get the imported files. This also includes the
-      // current file itself.
-      [file].concat(
-        result.messages.filter((msg) => msg.type === 'dependency').map((msg) => msg.file),
-      ),
-    ])
-}
-
 function optimizeCss(
   input: string,
   { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},

packages/@tailwindcss-cli/tsup.config.ts

@@ -5,5 +5,4 @@ export default defineConfig({
   clean: true,
   minify: true,
   entry: ['src/index.ts'],
-  noExternal: ['internal-postcss-fix-relative-paths'],
 })

packages/@tailwindcss-node/package.json

@@ -40,6 +40,7 @@
     "tailwindcss": "workspace:^"
   },
   "dependencies": {
+    "enhanced-resolve": "^5.17.1",
     "jiti": "^2.0.0-beta.3"
   }
 }