Fix line breaks by keeping everything a string until it's necessary t…

…o convert

integrations/upgrade/js-config.test.ts

@@ -68,7 +68,6 @@ test(
       @import 'tailwindcss';
 
       @source './**/*.{html,js}';
-
       @source '../my-app/**/*.{html,js}';
 
       @variant dark (&:where(.dark, .dark *));

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

@@ -1,5 +1,5 @@
 import path from 'node:path'
-import { AtRule, type Plugin, Root } from 'postcss'
+import postcss, { AtRule, type Plugin, Root } from 'postcss'
 import { normalizePath } from '../../../@tailwindcss-node/src/normalize-path'
 import type { JSConfigMigration } from '../migrate-js-config'
 import type { Stylesheet } from '../stylesheet'
@@ -39,21 +39,17 @@ export function migrateConfig(
         }),
       )
     } else {
+      let css = '\n\n'
       for (let source of jsConfigMigration.sources) {
         let absolute = path.resolve(source.base, source.pattern)
-        cssConfig.append(
-          new AtRule({
-            name: 'source',
-            params: `'${relativeToStylesheet(sheet, absolute)}'`,
-          }),
-        )
+        css += `@source '${relativeToStylesheet(sheet, absolute)}';\n`
       }
 
-      if (jsConfigMigration.css.nodes.length > 0 && jsConfigMigration.sources.length > 0) {
-        jsConfigMigration.css.nodes[0].raws.before = '\n\n'
+      if (jsConfigMigration.sources.length > 0) {
+        css = css + '\n'
       }
 
-      cssConfig.append(jsConfigMigration.css.nodes)
+      cssConfig.append(postcss.parse(css + jsConfigMigration.css))
     }
 
     // Inject the `@config` in a sensible place

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

@@ -1,6 +1,5 @@
 import fs from 'node:fs/promises'
 import { dirname } from 'path'
-import postcss from 'postcss'
 import type { Config } from 'tailwindcss'
 import { fileURLToPath } from 'url'
 import { loadModule } from '../../@tailwindcss-node/src/compile'
@@ -20,7 +19,7 @@ export type JSConfigMigration =
   // Could not convert the config file, need to inject it as-is in a @config directive
   null | {
     sources: { base: string; pattern: string }[]
-    css: postcss.Root
+    css: string
   }
 
 export async function migrateJsConfig(
@@ -56,7 +55,7 @@ export async function migrateJsConfig(
 
   return {
     sources,
-    css: postcss.parse(cssConfigs.join('\n')),
+    css: cssConfigs.join('\n'),
   }
 }
 
@@ -73,10 +72,7 @@ async function migrateTheme(unresolvedConfig: Config & { theme: any }): Promise<
 
     if (!resetNamespaces.has(key[0])) {
       resetNamespaces.set(key[0], false)
-      // css += `  --${keyPathToCssProperty([key[0]])}-*: initial;\n`
     }
-
-    // css += `  --${keyPathToCssProperty(key)}: ${value};\n`
   }
 
   let themeValues = deepMerge({}, [overwriteTheme, extendTheme], mergeThemeExtension)