Font loader call json parsing fix (vercel#41052)

Stringify into one json object instead. Previously parsing would break if a string included a semicolon.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

packages/next-swc/crates/core/src/next_font_loaders/font_imports_generator.rs

@@ -36,21 +36,26 @@ impl<'a> FontImportsGenerator<'a> {
                         .collect();
 
                     if let Ok(json) = json {
-                        let mut json_values: Vec<String> =
-                            json.iter().map(|value| value.to_string()).collect();
                         let function_name = match &font_function.function_name {
                             Some(function) => String::from(&**function),
                             None => String::new(),
                         };
-                        let mut values = vec![self.relative_path.to_string(), function_name];
-                        values.append(&mut json_values);
+                        let mut query_json_values = serde_json::Map::new();
+                        query_json_values.insert(
+                            String::from("path"),
+                            Value::String(self.relative_path.to_string()),
+                        );
+                        query_json_values
+                            .insert(String::from("import"), Value::String(function_name));
+                        query_json_values.insert(String::from("arguments"), Value::Array(json));
+
+                        let query_json = Value::Object(query_json_values);
 
                         return Some(ImportDecl {
                             src: Box::new(Str {
                                 value: JsWord::from(format!(
                                     "{}/target.css?{}",
-                                    font_function.loader,
-                                    values.join(";")
+                                    font_function.loader, query_json
                                 )),
                                 raw: None,
                                 span: DUMMY_SP,

packages/next-swc/crates/core/tests/errors/next-font-loaders/export-let/output.js

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

packages/next-swc/crates/core/tests/errors/next-font-loaders/not-const/output.js

@@ -1,4 +1,4 @@
-import inter1 from '@next/font/google/target.css?pages/test.tsx;Inter;{"variant":"400"}';
-import inter2 from '@next/font/google/target.css?pages/test.tsx;Inter;{"variant":"400"}';
+import inter1 from '@next/font/google/target.css?{"arguments":[{"variant":"400"}],"import":"Inter","path":"pages/test.tsx"}';
+import inter2 from '@next/font/google/target.css?{"arguments":[{"variant":"400"}],"import":"Inter","path":"pages/test.tsx"}';
 var i = 10;
 var i2 = 20;

packages/next-swc/crates/core/tests/errors/next-font-loaders/options-object/output.js

@@ -1,7 +1,7 @@
-import a from "@next/font/google/target.css?pages/test.tsx;ABeeZee;{}";
-import a from "@next/font/google/target.css?pages/test.tsx;ABeeZee;{}";
-import a from "@next/font/google/target.css?pages/test.tsx;ABeeZee;{}";
-import a from "@next/font/google/target.css?pages/test.tsx;ABeeZee;{}";
+import a from '@next/font/google/target.css?{"arguments":[{}],"import":"ABeeZee","path":"pages/test.tsx"}';
+import a from '@next/font/google/target.css?{"arguments":[{}],"import":"ABeeZee","path":"pages/test.tsx"}';
+import a from '@next/font/google/target.css?{"arguments":[{}],"import":"ABeeZee","path":"pages/test.tsx"}';
+import a from '@next/font/google/target.css?{"arguments":[{}],"import":"ABeeZee","path":"pages/test.tsx"}';
 const a = fn({
     10: 'hello'
 });

packages/next-swc/crates/core/tests/errors/next-font-loaders/spread-arg/output.js

@@ -1,2 +1,2 @@
-import inter from "@next/font/google/target.css?pages/test.tsx;Inter;{};[]";
+import inter from '@next/font/google/target.css?{"arguments":[{},[]],"import":"Inter","path":"pages/test.tsx"}';
 const a = fn(...{}, ...[]);

packages/next-swc/crates/core/tests/fixture/next-font-loaders/default-import/output.js

@@ -1 +1 @@
-import font from 'cool-fonts/target.css?pages/test.tsx;;{"prop":true}';
+import font from 'cool-fonts/target.css?{"arguments":[{"prop":true}],"import":"","path":"pages/test.tsx"}';

packages/next-swc/crates/core/tests/fixture/next-font-loaders/export-const/output.js

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

packages/next-swc/crates/core/tests/fixture/next-font-loaders/exports/output.js

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

packages/next-swc/crates/core/tests/fixture/next-font-loaders/font-options/output.js

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

packages/next-swc/crates/core/tests/fixture/next-font-loaders/import-as/output.js

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

packages/next-swc/crates/core/tests/fixture/next-font-loaders/many-args/output.js

@@ -1 +1 @@
-import geo from '@next/font/google/target.css?pages/test.tsx;Geo;"test";[1.0];{"a":2.0};3.0';
+import geo from '@next/font/google/target.css?{"arguments":["test",[1.0],{"a":2.0},3.0],"import":"Geo","path":"pages/test.tsx"}';

packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-calls/output.js

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

packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-font-downloaders/output.js

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

packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-fonts/output.js

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

packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-imports/output.js

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

packages/next-swc/crates/core/tests/fixture/next-font-loaders/no-args/output.js

@@ -1 +1 @@
-import fira from "@next/font/google/target.css?pages/test.tsx;Fira_Code";
+import fira from '@next/font/google/target.css?{"arguments":[],"import":"Fira_Code","path":"pages/test.tsx"}';

packages/next/build/webpack/loaders/next-font-loader/index.ts

@@ -32,11 +32,12 @@ export default async function nextFontLoader(this: any) {
       return outputPath
     }
 
-    // next-swc next_font_loaders turns each function call argument into JSON seperated by semicolons
-    let [relativeFilePathFromRoot, functionName, ...data] = this.resourceQuery
-      .slice(1)
-      .split(';')
-    data = data.map((value: string) => JSON.parse(value))
+    // next-swc next_font_loaders turns each font loader call into JSON
+    const {
+      path: relativeFilePathFromRoot,
+      import: functionName,
+      arguments: data,
+    } = JSON.parse(this.resourceQuery.slice(1))
 
     try {
       const fontLoader: FontLoader = require(path.join(