Repository: next.js
Issue: Getting "Unexpected object key type" error when using next/font
Labels: bug,SWC,Font (next/font)

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Thu Jul  6 22:20:00 PDT 2023; root:xnu-8020.240.18.702.13~1/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.17.0
      npm: 9.6.7
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.12
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

Font optimization (next/font), SWC transpilation

### Link to the code that reproduces this issue or a replay of the bug

https://github.com/dtokos/next-unexpected-object-key-type-error

### To Reproduce

1. Clone the repo
2. Install dependencies (npm i)
3. Build the app (next build)

The is caused by the following code which is inside [layout.tsx](https://github.com/dtokos/next-unexpected-object-key-type-error/blob/main/app/layout.tsx):

```ts
import { Inter } from 'next/font/google';
const inter = Inter({ 'subsets': 'latin' });
```

### Describe the Bug

My team stumbled upon this when they were configuring [Eslint](https://eslint.org). We decided to use the [quote-props](https://eslint.org/docs/latest/rules/quote-props) rule with the following configuration:

```json
{
    "rules": [
        "quote-props": ["error", "always"]
    ]
}
```

The linter would instruct us to change the line like this (add quotes):

```diff
- const inter = Inter({ subsets: 'latin' });
+ const inter = Inter({ 'subsets': 'latin' });
```

Which, when built, results in the error "Unexpected object key type". I tracked down the error in these two files:

[packages/next-swc/crates/next-font/src/font_imports_generator.rs](https://github.com/vercel/next.js/blob/canary/packages/next-swc/crates/next-font/src/font_imports_generator.rs#L197)
[packages/next-swc/crates/next-transform-font/src/font_imports_generator.rs](https://github.com/vercel/next.js/blob/canary/packages/next-swc/crates/next-transform-font/src/font_imports_generator.rs#L197)

The function tries to convert a JS object to JSON. However, the `match` expression handles only one case where the prop is plain a identifier.

I think that you should consider supporting the case where the prop is a [string literal](https://github.com/swc-project/swc/blob/main/crates/swc_ecma_ast/src/prop.rs#L102). Please note that this assumption is based on a first look. I didn't do a deep dive into how swc and next interoperate. In the meantime, we adjusted our linter settings.

### Expected Behavior

I think that using quotes around object properties in this case should compile without errors. I think string literals should not be an issue in the JS object to JSON conversion.

```ts
const inter = Inter({ 'subsets': 'latin' });
```

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_