content rules from the JS config that are also covered by the automatic source detection should not be migrated to CSS

Author: philipp-spiess

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Changed
+
+- _Upgrade (experimental)_: `content` rules from the JS configuration that are also covered by the automatic source detection are no longer migrated to CSS
 
 ## [4.0.0-alpha.28] - 2024-10-17
 

integrations/upgrade/js-config.test.ts

@@ -1,5 +1,5 @@
 import { expect } from 'vitest'
-import { css, json, test, ts } from '../utils'
+import { css, html, json, test, ts } from '../utils'
 
 test(
   `upgrade JS config files with flat theme values, darkMode, and content fields`,
@@ -18,7 +18,7 @@ test(
 
         module.exports = {
           darkMode: 'selector',
-          content: ['./src/**/*.{html,js}', './my-app/**/*.{html,js}'],
+          content: ['./src/**/*.{html,js}', './node_modules/my-external-lib/**/*.{html}'],
           theme: {
             boxShadow: {
               sm: '0 2px 6px rgb(15 23 42 / 0.08)',
@@ -72,6 +72,11 @@ test(
         @tailwind components;
         @tailwind utilities;
       `,
+      'node_modules/my-external-lib/src/template.html': html`
+        <div class="text-red-500">
+          Hello world!
+        </div>
+      `,
     },
   },
   async ({ exec, fs }) => {
@@ -82,8 +87,7 @@ test(
       --- src/input.css ---
       @import 'tailwindcss';
 
-      @source './**/*.{html,js}';
-      @source '../my-app/**/*.{html,js}';
+      @source '../node_modules/my-external-lib/**/*.{html}';
 
       @variant dark (&:where(.dark, .dark *));
 

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

@@ -1,6 +1,7 @@
+import { Scanner } from '@tailwindcss/oxide'
 import fs from 'node:fs/promises'
 import { dirname } from 'path'
-import type { Config } from 'tailwindcss'
+import { type Config } from 'tailwindcss'
 import defaultTheme from 'tailwindcss/defaultTheme'
 import { fileURLToPath } from 'url'
 import { loadModule } from '../../@tailwindcss-node/src/compile'
@@ -15,7 +16,7 @@ import type { ThemeConfig } from '../../tailwindcss/src/compat/config/types'
 import { darkModePlugin } from '../../tailwindcss/src/compat/dark-mode'
 import type { DesignSystem } from '../../tailwindcss/src/design-system'
 import { findStaticPlugins } from './utils/extract-static-plugins'
-import { info } from './utils/renderer'
+import { info, warn } from './utils/renderer'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
@@ -54,7 +55,7 @@ export async function migrateJsConfig(
   }
 
   if ('content' in unresolvedConfig) {
-    sources = migrateContent(unresolvedConfig as any, base)
+    sources = await migrateContent(unresolvedConfig as any, base)
   }
 
   if ('theme' in unresolvedConfig) {
@@ -158,16 +159,35 @@ function createSectionKey(key: string[]): string {
   return sectionSegments.join('-')
 }
 
-function migrateContent(
+async function migrateContent(
   unresolvedConfig: Config & { content: any },
   base: string,
-): { base: string; pattern: string }[] {
+): Promise<{ base: string; pattern: string }[]> {
+  let autoContentFiles = listAutoContentFiles(base)
+
   let sources = []
   for (let content of unresolvedConfig.content) {
     if (typeof content !== 'string') {
       throw new Error('Unsupported content value: ' + content)
     }
-    sources.push({ base, pattern: content })
+
+    let sourceFiles = listSourceContentFiles({ base, pattern: content })
+
+    let autoContentContainsAllSourceFiles = true
+    for (let sourceFile of sourceFiles) {
+      if (!autoContentFiles.includes(sourceFile)) {
+        autoContentContainsAllSourceFiles = false
+        break
+      }
+    }
+
+    if (autoContentContainsAllSourceFiles) {
+      warn(
+        'The `content` configuration `${content}` is already included in the automatic content file discovery and will not be migrated.',
+      )
+    } else {
+      sources.push({ base, pattern: content })
+    }
   }
   return sources
 }
@@ -253,3 +273,15 @@ function keyframesToCss(keyframes: Record<string, unknown>): string {
   let ast: AstNode[] = keyframesToRules({ theme: { keyframes } })
   return toCss(ast).trim() + '\n'
 }
+
+function listAutoContentFiles(base: string) {
+  let scanner = new Scanner({ detectSources: { base } })
+  scanner.scan()
+  return scanner.files
+}
+
+function listSourceContentFiles(source: { base: string; pattern: string }): string[] {
+  let scanner = new Scanner({ sources: [source] })
+  scanner.scan()
+  return scanner.files
+}