fix(font): don't break directives with inserted next/font import (#72350)

the `next_font_loaders` transform replaces imports from `next/font` with
slightly different ones. unfortunately it was inserting these imports
**at the top** of the file, which broke the `server_actions` transform
because it expects "use server"/"use cache" directives to be the first
item in the file.

this PR changes the logic in the font transform to insert the import in
the place where the original `next/font` import occurred instead of at
the top of the file.

(i suppose that we could just reorder the transforms and run
`server_actions` before `next_font_loaders`, but this feels more robust)

Fixes #72179

Author: lubieowoce

crates/next-custom-transforms/src/transforms/fonts/mod.rs

@@ -74,15 +74,24 @@ impl VisitMut for NextFontLoaders {
                 };
             items.visit_with(&mut wrong_scope);
 
+            fn is_removable(ctx: &NextFontLoaders, item: &ModuleItem) -> bool {
+                ctx.state.removeable_module_items.contains(&item.span_lo())
+            }
+
+            let first_removable_index = items
+                .iter()
+                .position(|item| is_removable(self, item))
+                .unwrap();
+
             // Remove marked module items
-            items.retain(|item| !self.state.removeable_module_items.contains(&item.span_lo()));
+            items.retain(|item| !is_removable(self, item));
 
             // Add font imports and exports
-            let mut new_items = Vec::new();
-            new_items.append(&mut self.state.font_imports);
-            new_items.append(items);
-            new_items.append(&mut self.state.font_exports);
-            *items = new_items;
+            items.splice(
+                first_removable_index..first_removable_index,
+                std::mem::take(&mut self.state.font_imports),
+            );
+            items.append(&mut self.state.font_exports);
         }
     }
 }

crates/next-custom-transforms/tests/errors/next-font-loaders/export-let/output.js

@@ -1,5 +1,5 @@
+import React from 'react';
 import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[],"variableName":"firaCode"}';
 import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[],"variableName":"inter"}';
-import React from 'react';
 export { firaCode };
 export { inter };

crates/next-custom-transforms/tests/fixture.rs

@@ -430,6 +430,35 @@ fn server_actions_server_fixture(input: PathBuf) {
     );
 }
 
+#[fixture("tests/fixture/next-font-with-directive/**/input.js")]
+fn next_font_with_directive_fixture(input: PathBuf) {
+    let output = input.parent().unwrap().join("output.js");
+    test_fixture(
+        syntax(),
+        &|_tr| {
+            (
+                resolver(Mark::new(), Mark::new(), false),
+                next_font_loaders(FontLoaderConfig {
+                    relative_file_path_from_root: "app/test.tsx".into(),
+                    font_loaders: vec!["@next/font/google".into()],
+                }),
+                server_actions(
+                    &FileName::Real("/app/test.tsx".into()),
+                    server_actions::Config {
+                        is_react_server_layer: true,
+                        enabled: true,
+                        hash_salt: "".into(),
+                    },
+                    _tr.comments.as_ref().clone(),
+                ),
+            )
+        },
+        &input,
+        &output,
+        Default::default(),
+    );
+}
+
 #[fixture("tests/fixture/server-actions/client/**/input.js")]
 fn server_actions_client_fixture(input: PathBuf) {
     let output = input.parent().unwrap().join("output.js");

crates/next-custom-transforms/tests/fixture/next-font-loaders/export-const/output.js

@@ -1,5 +1,5 @@
+import React from 'react';
 import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[],"variableName":"firaCode"}';
 import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[],"variableName":"inter"}';
-import React from 'react';
 export { firaCode };
 export { inter };

crates/next-custom-transforms/tests/fixture/next-font-loaders/exports/output.js

@@ -1,5 +1,5 @@
+import React from 'react';
 import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[],"variableName":"firaCode"}';
 import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[],"variableName":"inter"}';
-import React from 'react';
 export { firaCode };
 export default inter;

crates/next-custom-transforms/tests/fixture/next-font-loaders/font-options/output.js

@@ -1,3 +1,3 @@
-import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","fallback":["system-ui",{"key":false},[]],"preload":true,"key":{"key2":{}}}],"variableName":"firaCode"}';
 import React from 'react';
+import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","fallback":["system-ui",{"key":false},[]],"preload":true,"key":{"key2":{}}}],"variableName":"firaCode"}';
 console.log(firaCode);

crates/next-custom-transforms/tests/fixture/next-font-loaders/import-as/output.js

@@ -1,2 +1,2 @@
-import acme1 from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"Acme","arguments":[{"variant":"400"}],"variableName":"acme1"}';
 import React from 'react';
+import acme1 from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"Acme","arguments":[{"variant":"400"}],"variableName":"acme1"}';

crates/next-custom-transforms/tests/fixture/next-font-loaders/multiple-calls/output.js

@@ -1,3 +1,3 @@
+import React from 'react';
 import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}],"variableName":"inter"}';
 import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}],"variableName":"inter"}';
-import React from 'react';

crates/next-custom-transforms/tests/fixture/next-font-loaders/multiple-font-downloaders/output.js

@@ -1,3 +1,3 @@
+import React from 'react';
 import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900"}],"variableName":"inter"}';
 import fira from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","display":"swap"}],"variableName":"fira"}';
-import React from 'react';

crates/next-custom-transforms/tests/fixture/next-font-loaders/multiple-fonts/output.js

@@ -1,3 +1,3 @@
+import React from 'react';
 import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","fallback":["system-ui"]}],"variableName":"firaCode"}';
 import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}],"variableName":"inter"}';
-import React from 'react';