Upgrade: Rewrite imports of relative files to use relative file paths

Author: philipp-spiess

packages/@tailwindcss-upgrade/src/codemods/fixtures/test.css

@@ -0,0 +1,3 @@
+.foo {
+  color: red;
+}

packages/@tailwindcss-upgrade/src/codemods/migrate-import.test.ts

@@ -0,0 +1,88 @@
+import { __unstable__loadDesignSystem } from '@tailwindcss/node'
+import dedent from 'dedent'
+import postcss from 'postcss'
+import { expect, it } from 'vitest'
+import type { UserConfig } from '../../../tailwindcss/src/compat/config/types'
+import { migrateImport } from './migrate-import'
+
+const css = dedent
+
+async function migrate(input: string, userConfig: UserConfig = {}) {
+  return postcss()
+    .use(
+      migrateImport({
+        designSystem: await __unstable__loadDesignSystem(`@import 'tailwindcss';`, {
+          base: __dirname,
+        }),
+        userConfig,
+      }),
+    )
+    .process(input, { from: expect.getState().testPath })
+    .then((result) => result.css)
+}
+
+it('prints relative file imports as relative paths', async () => {
+  expect(
+    await migrate(css`
+      @import 'fixtures/test';
+      @import 'fixtures/test.css';
+      @import './fixtures/test.css';
+
+      @import 'fixtures/test' screen;
+      @import 'fixtures/test.css' screen;
+      @import './fixtures/test.css' screen;
+
+      @import 'fixtures/test' supports (display: grid);
+      @import 'fixtures/test.css' supports (display: grid);
+      @import './fixtures/test.css' supports (display: grid);
+
+      @import 'fixtures/test' layer(utilities);
+      @import 'fixtures/test.css' layer(utilities);
+      @import './fixtures/test.css' layer(utilities);
+
+      @import 'fixtures/test' theme(inline);
+      @import 'fixtures/test.css' theme(inline);
+      @import './fixtures/test.css' theme(inline);
+
+      @import 'fixtures/test' layer(utilities) supports (display: grid) screen and
+        (min-width: 600px);
+      @import 'fixtures/test.css' layer(utilities) supports (display: grid) screen and
+        (min-width: 600px);
+      @import './fixtures/test.css' layer(utilities) supports (display: grid) screen and
+        (min-width: 600px);
+
+      @import 'tailwindcss';
+      @import 'tailwindcss/theme.css';
+    `),
+  ).toMatchInlineSnapshot(`
+    "@import './fixtures/test.css';
+    @import './fixtures/test.css';
+    @import './fixtures/test.css';
+
+    @import './fixtures/test.css' screen;
+    @import './fixtures/test.css' screen;
+    @import './fixtures/test.css' screen;
+
+    @import './fixtures/test.css' supports (display: grid);
+    @import './fixtures/test.css' supports (display: grid);
+    @import './fixtures/test.css' supports (display: grid);
+
+    @import './fixtures/test.css' layer(utilities);
+    @import './fixtures/test.css' layer(utilities);
+    @import './fixtures/test.css' layer(utilities);
+
+    @import './fixtures/test.css' theme(inline);
+    @import './fixtures/test.css' theme(inline);
+    @import './fixtures/test.css' theme(inline);
+
+    @import './fixtures/test.css' layer(utilities) supports (display: grid) screen and
+      (min-width: 600px);
+    @import './fixtures/test.css' layer(utilities) supports (display: grid) screen and
+      (min-width: 600px);
+    @import './fixtures/test.css' layer(utilities) supports (display: grid) screen and
+      (min-width: 600px);
+
+    @import 'tailwindcss';
+    @import 'tailwindcss/theme.css';"
+  `)
+})

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

@@ -0,0 +1,66 @@
+import fs from 'node:fs/promises'
+import { dirname, extname, resolve } from 'node:path'
+import { type Plugin, type Root } from 'postcss'
+import type { Config } from 'tailwindcss'
+import { parseImportParams } from '../../../tailwindcss/src/at-import'
+import { resolveConfig } from '../../../tailwindcss/src/compat/config/resolve-config'
+import { buildMediaQuery } from '../../../tailwindcss/src/compat/screens-config'
+import type { DesignSystem } from '../../../tailwindcss/src/design-system'
+import { DefaultMap } from '../../../tailwindcss/src/utils/default-map'
+import { segment } from '../../../tailwindcss/src/utils/segment'
+import * as ValueParser from '../../../tailwindcss/src/value-parser'
+
+export function migrateImport({
+  designSystem,
+  userConfig,
+}: {
+  designSystem?: DesignSystem
+  userConfig?: Config
+} = {}): Plugin {
+  async function migrate(root: Root) {
+    if (!designSystem || !userConfig) return
+    let file = root.source?.input.file
+    if (!file) return
+
+    let { resolvedConfig } = resolveConfig(designSystem, [{ base: '', config: userConfig }])
+    let screens = resolvedConfig?.theme?.screens || {}
+
+    let mediaQueries = new DefaultMap<string, string | null>((name) => {
+      let value = designSystem?.resolveThemeValue(`--breakpoint-${name}`) ?? screens?.[name]
+      if (typeof value === 'string') return `(width >= theme(--breakpoint-${name}))`
+      return value ? buildMediaQuery(value) : null
+    })
+
+    let mutations: Promise<void>[] = []
+
+    root.walkAtRules('import', (rule) => {
+      let [firstParam, ...rest] = segment(rule.params, ' ')
+
+      let params = parseImportParams(ValueParser.parse(firstParam))
+
+      // check if the file exists
+      let fullPath = resolve(dirname(file), params.uri)
+      if (extname(fullPath) === '') fullPath += '.css'
+
+      if (params.uri[0] === '.') {
+        return
+      }
+
+      mutations.push(
+        (async () => {
+          if (await fs.stat(fullPath)) {
+            let ext = extname(params.uri) === '' ? '.css' : ''
+            rule.params = [`'./${params.uri}${ext}'`, ...rest].join(' ')
+          }
+        })(),
+      )
+    })
+
+    await Promise.allSettled(mutations)
+  }
+
+  return {
+    postcssPlugin: '@tailwindcss/upgrade/migrate-import',
+    OnceExit: migrate,
+  }
+}

packages/tailwindcss/src/at-import.ts

@@ -67,7 +67,7 @@ export async function substituteAtImports(
 // `postcss-import` <https://github.com/postcss/postcss-import>
 // Copyright (c) 2014 Maxime Thirouin, Jason Campbell & Kevin Mårtensson
 // Released under the MIT License.
-function parseImportParams(params: ValueParser.ValueAstNode[]) {
+export function parseImportParams(params: ValueParser.ValueAstNode[]) {
   let uri
   let layer: string | null = null
   let media: string | null = null