Repository: ui
Issue: [bug]: Tailwind config parsing fails when encountering variable fonts and Tailwind Typography
Labels: bug

### Describe the bug

I have this Tailwind config:

```ts
import animate from 'tailwindcss-animate';
import typography from '@tailwindcss/typography';
import defaultTheme from 'tailwindcss/defaultTheme';
import type { Config } from 'tailwindcss';

const config: Config = {
  darkMode: ['class'],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './providers/**/*.{ts,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-geist-sans)', ...defaultTheme.fontFamily.sans],
        mono: ['var(--font-geist-mono)', ...defaultTheme.fontFamily.mono],
      },
      typography: (theme: (path: string) => string) => ({
        DEFAULT: {
          css: {
            ':first-child': {
              marginTop: theme('margin.0'),
            },
            'h1, h2, h3, h4, h5, h6': {
              fontWeight: theme('fontWeight.semibold'),
              letterSpacing: theme('letterSpacing.tight'),
              marginBottom: theme('margin.4'),

              '+ h1, + h2, + h3, + h4, + h5, + h6': {
                marginTop: theme('margin.0'),
              },
            },
            h1: {
              fontSize: theme('fontSize.3xl'),
              marginTop: theme('margin.16'),
            },
            h2: {
              fontSize: theme('fontSize.2xl'),
            },
            h3: {
              fontSize: theme('fontSize.xl'),
            },
            h4: {
              fontSize: theme('fontSize.lg'),
            },
            h5: {
              fontSize: theme('fontSize.base'),
            },
            h6: {
              fontSize: theme('fontSize.base'),
            },
            table: {
              boxShadow: `0 0 0 1px ${theme('colors.gray.200')}`,
              borderRadius: theme('borderRadius.md'),
              overflow: 'hidden',
              // eslint-disable-next-line id-length
              p: {
                margin: 0,
              },
              th: {
                paddingTop: '0.5714286em',
                paddingRight: '0.5714286em',
                paddingBottom: '0.5714286em',
                paddingLeft: '0.5714286em',
                backgroundColor: theme('colors.gray.100'),
                '&:not(:last-child)': {
                  borderRightWidth: '1px',
                  borderRightColor: theme('colors.gray.200'),
                },
              },
              'tbody td, tfoot td': {
                paddingLeft: '0.5714286em',
                '&:not(:last-child)': {
                  borderRightWidth: '1px',
                  borderRightColor: theme('colors.gray.200'),
                },
              },
            },
            code: {
              '&::before, &::after': {
                display: 'none',
              },
            },
            pre: {
              backgroundColor: 'transparent',
              borderWidth: 1,
              borderColor: theme('colors.gray.200'),
            },
          },
        },
        invert: {
          css: {
            table: {
              boxShadow: `0 0 0 1px ${theme('colors.gray.700')}`,
              th: {
                backgroundColor: theme('colors.gray.800'),
                '&:not(:last-child)': {
                  borderRightColor: theme('colors.gray.700'),
                },
              },
              'tbody td, tfoot td': {
                '&:not(:last-child)': {
                  borderRightColor: theme('colors.gray.700'),
                },
              },
            },
            pre: {
              borderColor: theme('colors.gray.800'),
            },
          },
        },
      }),
    },
  },
  plugins: [animate, typography],
};

export default config;
```

and `components.json`:

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "./tailwind.config.ts",
    "css": "./globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@repo/shadcn-ui/components",
    "utils": "@repo/shadcn-ui/lib/utils",
    "ui": "@repo/shadcn-ui/components/ui",
    "lib": "@repo/shadcn-ui/lib",
    "hooks": "@repo/shadcn-ui/hooks"
  }
}
```

Running `npx shadcn add --all` fails. See log below.

### Affected component/components

CLI

### How to reproduce

1. Create the Tailwind config mentioned
2. Create the `components.json` mentioned
3. Run `npx shadcn add --all`

### Codesandbox/StackBlitz link

_No response_

### Logs

```bash
npx shadcn add --all
✔ Checking registry.
⠋ Updating ./tailwind.config.ts
Something went wrong. Please check the error below for more details.
If the problem persists, please open an issue on GitHub.

Manipulation error: A syntax error was inserted.

../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:25:13 - error TS1137: Expression or comma expected.

25      sans: [var(--font-geist-sans), ...defaultTheme.fontFamily.sans],
               ~~~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:25:17 - error TS1138: Parameter declaration expected.

25      sans: [var(--font-geist-sans), ...defaultTheme.fontFamily.sans],
                   ~~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:25:19 - error TS1005: ',' expected.

25      sans: [var(--font-geist-sans), ...defaultTheme.fontFamily.sans],
                     ~~~~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:25:23 - error TS1005: ',' expected.

25      sans: [var(--font-geist-sans), ...defaultTheme.fontFamily.sans],
                         ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:25:34 - error TS1005: ',' expected.

25      sans: [var(--font-geist-sans), ...defaultTheme.fontFamily.sans],
                                    ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:25:35 - error TS1136: Property assignment expected.

25      sans: [var(--font-geist-sans), ...defaultTheme.fontFamily.sans],
                                     ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:25:68 - error TS1005: ',' expected.

25      sans: [var(--font-geist-sans), ...defaultTheme.fontFamily.sans],
                                                                      ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:25:69 - error TS1136: Property assignment expected.

25      sans: [var(--font-geist-sans), ...defaultTheme.fontFamily.sans],
                                                                       ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:26:13 - error TS1137: Expression or comma expected.

26      mono: [var(--font-geist-mono), ...defaultTheme.fontFamily.mono]
               ~~~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:26:17 - error TS1138: Parameter declaration expected.

26      mono: [var(--font-geist-mono), ...defaultTheme.fontFamily.mono]
                   ~~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:26:19 - error TS1005: ',' expected.

26      mono: [var(--font-geist-mono), ...defaultTheme.fontFamily.mono]
                     ~~~~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:26:23 - error TS1005: ',' expected.

26      mono: [var(--font-geist-mono), ...defaultTheme.fontFamily.mono]
                         ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:26:34 - error TS1005: ',' expected.

26      mono: [var(--font-geist-mono), ...defaultTheme.fontFamily.mono]
                                    ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:26:35 - error TS1134: Variable declaration expected.

26      mono: [var(--font-geist-mono), ...defaultTheme.fontFamily.mono]
                                     ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:26:37 - error TS1134: Variable declaration expected.

26      mono: [var(--font-geist-mono), ...defaultTheme.fontFamily.mono]
                                       ~~~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:26:52 - error TS1005: ',' expected.

26      mono: [var(--font-geist-mono), ...defaultTheme.fontFamily.mono]
                                                      ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:26:63 - error TS1005: ',' expected.

26      mono: [var(--font-geist-mono), ...defaultTheme.fontFamily.mono]
                                                                 ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:26:68 - error TS1005: ',' expected.

26      mono: [var(--font-geist-mono), ...defaultTheme.fontFamily.mono]
                                                                      ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:27:5 - error TS1128: Declaration or statement expected.

27     },
       ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:27:6 - error TS1128: Declaration or statement expected.

27     },
        ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:29:22 - error TS1005: ';' expected.

29      'accordion-down': {
                        ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:32:8 - error TS1128: Declaration or statement expected.

32       },
          ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:36:7 - error TS1128: Declaration or statement expected.

36      },
         ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:37:20 - error TS1005: ';' expected.

37      'accordion-up': {
                      ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:40:8 - error TS1128: Declaration or statement expected.

40       },
          ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:45:6 - error TS1128: Declaration or statement expected.

45     },
        ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:47:22 - error TS1005: ';' expected.

47      'accordion-down': 'accordion-down 0.2s ease-out',
                        ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:48:20 - error TS1005: ';' expected.

48      'accordion-up': 'accordion-up 0.2s ease-out'
                      ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:49:6 - error TS1128: Declaration or statement expected.

49     },
        ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:51:4 - error TS1128: Declaration or statement expected.

51    }
      ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:52:3 - error TS1128: Declaration or statement expected.

52   },
     ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:52:4 - error TS1128: Declaration or statement expected.

52   },
      ~
../../../../../../var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts:54:1 - error TS1109: Expression expected.

54 };
   ~

Error replacing tree: The children of the old and new trees were expected to have the same count (7:12).

-- Details --
Path: /var/folders/f6/74w1n7r52879g59_6xch69ph0000gn/T/shadcn-yhS9D6euUc1s/shadcn-tailwind.config.ts
Text: "...,\n    './components/**/*.{ts,tsx}',\n    './app/**/*.{ts,tsx}',\n    './providers/**/*.{ts,tsx}',\n  ],\n  theme: {\n  \tcontainer: {\n  \t\tcenter: 'true',\n  \t\tpadding: '2rem',\n  \t\tscreens: {\n  \t\t\t'2xl': '1400px'\n  \t\t}\n  \t},\n  \textend: {\n  \t\tfontFamily: {\n  \t\t\tsans: [var(--font-geist-sans), ...defaultTheme.fontFamily.sans],\n  \t\t\tmono: [var(--font-geist-mono), ...defaultTheme.fontFamily.mono]\n  \t\t},\n  \t\tkeyframes: {\n  \t\t\t'accordion-down': {\n  \t\t\t\tfrom: {\n  \t\t\t\t\theight: '0'\n  \t\t\t\t},\n  \t\t\t\tto: {\n  \t\t\t\t\theight: 'var(--radix-accordion-content-height)'\n  \t\t\t\t}\n  \t\t\t},\n  \t\t\t'accordion-up': {\n  \t\t\t\tfrom: {\n  \t\t\t\t\theight: 'var(--radix-accordion-content-height)'\n  \t\t\t\t},\n  \t\t\t\tto: {\n  \t\t\t\t\theight: '0'\n  \t\t\t\t}\n  \t\t\t}\n  \t\t},\n  \t\tanimation: {\n  \t\t\t'accordion-down': 'accordion-down 0.2s ease-out',\n  \t\t\t'accordion-up': 'accordion-up 0.2s ease-out'\n  \t\t},\n  \t\ttypography: '(theme: (path: string) => string) => ({\\n        DEFAULT: {\\n          css: {\\n            :first-child: {\\n              marginTop: theme(margin.0),\\n            },\\n            h1, h2, h3, h4, h5, h6: {\\n              fontWeight: theme(fontWeight.semibold),\\n              letterSpacing: theme(letterSpacing.tight),\\n              marginBottom: theme(margin.4),\\n\\n              + h1, + h2, + h3, + h4, + h5, + h6: {\\n                marginTop: theme(margin.0),\\n              },\\n            },\\n            h1: {\\n              fontSize: theme(fontSize.3xl),\\n              marginTop: theme(margin.16),\\n            },\\n            h2: {\\n              fontSize: theme(fontSize.2xl),\\n            },\\n            h3: {\\n              fontSize: theme(fontSize.xl),\\n            },\\n            h4: {\\n              fontSize: theme(fontSize.lg),\\n            },\\n            h5: {\\n              fontSize: theme(fontSize.base),\\n            },\\n            h6: {\\n              fontSize: theme(fontSize.base),\\n            },\\n            table: {\\n              boxShadow: `0 0 0 1px ${theme(colors.gray.200)}`,\\n              borderRadius: theme(borderRadius.md),\\n              overflow: hidden,\\n              // eslint-disable-next-line id-length\\n              p: {\\n                margin: 0,\\n              },\\n              th: {\\n                paddingTop: 0.5714286em,\\n                paddingRight: 0.5714286em,\\n                paddingBottom: 0.5714286em,\\n                paddingLeft: 0.5714286em,\\n                backgroundColor: theme(colors.gray.100),\\n                &:not(:last-child): {\\n                  borderRightWidth: 1px,\\n                  borderRightColor: theme(colors.gray.200),\\n                },\\n              },\\n              tbody td, tfoot td: {\\n                paddingLeft: 0.5714286em,\\n                &:not(:last-child): {\\n                  borderRightWidth: 1px,\\n                  borderRightColor: theme(colors.gray.200),\\n                },\\n              },\\n            },\\n            code: {\\n              &::before, &::after: {\\n                display: none,\\n              },\\n            },\\n            pre: {\\n              backgroundColor: transparent,\\n              borderWidth: 1,\\n              borderColor: theme(colors.gray.200),\\n            },\\n          },\\n        },\\n        invert: {\\n          css: {\\n            table: {\\n              boxShadow: `0 0 0 1px ${theme(colors.gray.700)}`,\\n              th: {\\n                backgroundColor: theme(colors.gray.800),\\n                &:not(:last-child): {\\n                  borderRightColor: theme(colors.gray.700),\\n                },\\n              },\\n              tbody td, tfoot td: {\\n                &:not(:last-child): {\\n                  borderRightColor: theme(colors.gray.700),\\n                },\\n              },\\n            },\\n            pre: {\\n              borderColor: theme(colors.gray.800),\\n            },\\n          },\\n        },\\n      })'\n  \t}\n  },\n  plugins: [animate, typography],\n};\n\nexport default config;\n"
Stack: Error: Error replacing tree: The children of the old and new trees were expected to have the same count (7:12).
    at ParentFinderReplacementNodeHandler.handleChildren (/Users/haydenbleasel/.npm/_npx/16e1988cfd51310d/node_modules/ts-morph/dist/ts-morph.js:1436:19)
    at ParentFinderReplacementNodeHandler.handleNode (/Users/haydenbleasel/.npm/_npx/16e1988cfd51310d/node_modules/ts-morph/dist/ts-morph.js:1430:18)
    at ParentFinderReplacementNodeHandler.handleNode (/Users/haydenbleasel/.npm/_npx/16e1988cfd51310d/node_modules/ts-morph/dist/ts-morph.js:1570:19)
    at doManipulation (/Users/haydenbleasel/.npm/_npx/16e1988cfd51310d/node_modules/ts-morph/dist/ts-morph.js:2282:21)
    at insertIntoParentTextRange (/Users/haydenbleasel/.npm/_npx/16e1988cfd51310d/node_modules/ts-morph/dist/ts-morph.js:2317:5)
    at ObjectLiteralExpression.replaceWithText (/Users/haydenbleasel/.npm/_npx/16e1988cfd51310d/node_modules/ts-morph/dist/ts-morph.js:3644:9)
    at zt (file:///Users/haydenbleasel/.npm/_npx/16e1988cfd51310d/node_modules/shadcn/dist/index.js:5:4822)
    at async _t (file:///Users/haydenbleasel/.npm/_npx/16e1988cfd51310d/node_modules/shadcn/dist/index.js:5:3839)
    at async Fe (file:///Users/haydenbleasel/.npm/_npx/16e1988cfd51310d/node_modules/shadcn/dist/index.js:5:3433)
    at async ee (file:///Users/haydenbleasel/.npm/_npx/16e1988cfd51310d/node_modules/shadcn/dist/index.js:14:8868)
```
```


### System Info

```bash
MacOS 14.6.1 (23G93), Node v20.12.2
```


### Before submitting

- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues