search

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
75.74k stars 4.76k forks source link

[bug]: new shadcn ui incompatible width fontSize: [string, string] #4707

Open Poylar opened 3 months ago

Poylar commented 3 months ago

Describe the bug

config example: 

{
      '3xs': ['0.5rem', '1rem'],
      '2xs': ['0.625rem', '1rem'],
      xs: ['0.875rem', '1.25rem'],
      sm: ['1rem', '1.25rem'],
      lg: ['1.125rem', '1.75rem'],
      xl: ['1.25rem', '1.875rem'],
      '2xl': ['1.5rem', '2rem'],
      '3xl': ['1.75rem', '2.5rem'],
      '4xl': ['2rem', '2.5rem'],
      '5xl': ['3rem', '3.375rem'],
      '6xl': ['4rem', '6.25rem'],
      '7xl': ['5rem', '6.25rem'],
      '8xl': ['5rem', '5rem'],
      '9xl': ['7.5rem', '6.25rem'],
      '10xl': ['8.75rem', '6.25rem'],
      '11xl': ['12.5rem', '6.25rem'],
      '12xl': ['15rem', '10.25rem']
 },

output:

../../Users/poylar/AppData/Local/Temp/shadcn-XXXXXXLDBR8c/shadcn-tailwind.config.ts:35:10 - error TS1005: ';' expected.

35     '6xl': '4rem',
            ~
../../Users/poylar/AppData/Local/Temp/shadcn-XXXXXXLDBR8c/shadcn-tailwind.config.ts:36:10 - error TS1005: ';' expected.

36     '7xl': '5rem',
            ~
../../Users/poylar/AppData/Local/Temp/shadcn-XXXXXXLDBR8c/shadcn-tailwind.config.ts:37:10 - error TS1005: ';' expected.

37     '8xl': '5rem',
            ~
../../Users/poylar/AppData/Local/Temp/shadcn-XXXXXXLDBR8c/shadcn-tailwind.config.ts:38:10 - error TS1005: ';' expected.

38     '9xl': '7.5rem',
            ~
../../Users/poylar/AppData/Local/Temp/shadcn-XXXXXXLDBR8c/shadcn-tailwind.config.ts:39:11 - error TS1005: ';' expected.

39     '10xl': '8.75rem',

and

config:

 fontFamily: {
      sans: ['var(--font-sans)'],
      serif: ['var(--font-grotesk)']
    },

output error: 

    Path: C:/Users/poylar/AppData/Local/Temp/shadcn-XXXXXXLDBR8c/shadcn-tailwind.config.ts
Text: "...s,tsx}',\n    './components/**/*.{ts,tsx}',\n    './app/**/*.{ts,tsx}',\n    './src/**/*.{ts,tsx}'\n  ],\n  theme: {\n  \tcontainer: {\n  \t\tcenter: 'true',\n  \t\tpadding: '2rem',\n  \t\tscreens: {\n  \t\t\t'2xl': '1600px',\n  \t\t\t'3xl': '1840px'\n  \t\t}\n  \t},\n  \tfontFamily: {\n  \t\tsans: [var(--font-sans)],\n  \t\tserif: [var(--font-grotesk)]\n  \t},\n  \tfontSize: {\n  \t\t'3xs': '0.5rem',\n  \t\t'2xs': '0.625rem',\n  \t\txs: '0.875rem',\n  \t\tsm: '1rem',\n  \t\tlg: '1.125rem',\n  \t\txl: '1.25rem',\n  \t\t'2xl': '1.5rem',\n  \t\t'3xl': '1.75rem',\n  \t\t'4xl': '2rem',\n  \t\t'5xl': '3rem',\n  \t\t'6xl': '4rem',\n  \t\t'7xl': '5rem',\n  \t\t'8xl': '5rem',\n  \t\t'9xl': '7.5rem',\n  \t\t'10xl': '8.75rem',\n  \t\t'11xl': '12.5rem',\n  \t\t'12xl': '15rem'\n  \t},\n  \textend: {\n  \t\tcolors: {\n  \t\t\tblue: {\n  \t\t\t\t'100': '#DCE5ED',\n  \t\t\t\t'200': '#E8EAEE',\n  \t\t\t\t'400': '#3B81FF',\n  \t\t\t\t'500': '#005CFF',\n  \t\t\t\t'900': '#474E54',\n  \t\t\t\t'1000': '#242C34'\n  \t\t\t}\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\tmarquee: {\n  \t\t\t\tfrom: {\n  \t\t\t\t\ttransform: 'translateX(0)'\n  \t\t\t\t},\n  \t\t\t\tto: {\n  \t\t\t\t\ttransform: 'translateX(calc(-100% - var(--gap)))'\n  \t\t\t\t}\n  \t\t\t},\n  \t\t\t'marquee-vertical': {\n  \t\t\t\tfrom: {\n  \t\t\t\t\ttransform: 'translateY(0)'\n  \t\t\t\t},\n  \t\t\t\tto: {\n  \t\t\t\t\ttransform: 'translateY(calc(-100% - var(--gap)))'\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\tmarquee: 'marquee var(--duration) linear infinite',\n  \t\t\t'marquee-vertical': 'marquee-vertical var(--duration) linear infinite'\n  \t\t}\n  \t}\n  },\n  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')]\n};\n\nexport default ..."
Stack: Error: Error replacing tree: The children of the old and new trees were expected to have the same count (4:9).
    at ParentFinderReplacementNodeHandler.handleChildren (C:\Users\poylar\AppData\Local\npm-cache\_npx\16e1988cfd51310d\node_modules\ts-morph\dist\ts-morph.js:1436:19)
    at ParentFinderReplacementNodeHandler.handleNode (C:\Users\poylar\AppData\Local\npm-cache\_npx\16e1988cfd51310d\node_modules\ts-morph\dist\ts-morph.js:1430:18)
    at ParentFinderReplacementNodeHandler.handleNode (C:\Users\poylar\AppData\Local\npm-cache\_npx\16e1988cfd51310d\node_modules\ts-morph\dist\ts-morph.js:1570:19)
    at doManipulation (C:\Users\poylar\AppData\Local\npm-cache\_npx\16e1988cfd51310d\node_modules\ts-morph\dist\ts-morph.js:2282:21)
    at insertIntoParentTextRange (C:\Users\poylar\AppData\Local\npm-cache\_npx\16e1988cfd51310d\node_modules\ts-morph\dist\ts-morph.js:2317:5)
    at ObjectLiteralExpression.replaceWithText (C:\Users\poylar\AppData\Local\npm-cache\_npx\16e1988cfd51310d\node_modules\ts-morph\dist\ts-morph.js:3644:9)
    at zt (file:///C:/Users/poylar/AppData/Local/npm-cache/_npx/16e1988cfd51310d/node_modules/shadcn/dist/index.js:5:4822)
    at async _t (file:///C:/Users/poylar/AppData/Local/npm-cache/_npx/16e1988cfd51310d/node_modules/shadcn/dist/index.js:5:3839)
    at async Fe (file:///C:/Users/poylar/AppData/Local/npm-cache/_npx/16e1988cfd51310d/node_modules/shadcn/dist/index.js:5:3433)
    at async ee (file:///C:/Users/poylar/AppData/Local/npm-cache/_npx/16e1988cfd51310d/node_modules/shadcn/dist/index.js:14:8868)

full config example: 

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}'
  ],
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1600px',
        '3xl': '1840px'
      }
    },
    fontFamily: {
      sans: ['var(--font-sans)'],
      serif: ['var(--font-grotesk)']
    },
    fontSize: {
      '3xs': ['0.5rem', '1rem'],
      '2xs': ['0.625rem', '1rem'],
      xs: ['0.875rem', '1.25rem'],
      sm: ['1rem', '1.25rem'],
      lg: ['1.125rem', '1.75rem'],
      xl: ['1.25rem', '1.875rem'],
      '2xl': ['1.5rem', '2rem'],
      '3xl': ['1.75rem', '2.5rem'],
      '4xl': ['2rem', '2.5rem'],
      '5xl': ['3rem', '3.375rem'],
      '6xl': ['4rem', '6.25rem'],
      '7xl': ['5rem', '6.25rem'],
      '8xl': ['5rem', '5rem'],
      '9xl': ['7.5rem', '6.25rem'],
      '10xl': ['8.75rem', '6.25rem'],
      '11xl': ['12.5rem', '6.25rem'],
      '12xl': ['15rem', '10.25rem']
    },

    extend: {
      colors: {
        blue: {
          '100': '#DCE5ED',
          '200': '#E8EAEE',
          '400': '#3B81FF',
          '500': '#005CFF',
          '900': '#474E54',
          '1000': '#242C34'
        }
      },
      keyframes: {
        'accordion-down': {
          from: {
            height: '0'
          },
          to: {
            height: 'var(--radix-accordion-content-height)'
          }
        },
        'accordion-up': {
          from: {
            height: 'var(--radix-accordion-content-height)'
          },
          to: {
            height: '0'
          }
        },
        marquee: {
          from: {
            transform: 'translateX(0)'
          },
          to: {
            transform: 'translateX(calc(-100% - var(--gap)))'
          }
        },
        'marquee-vertical': {
          from: {
            transform: 'translateY(0)'
          },
          to: {
            transform: 'translateY(calc(-100% - var(--gap)))'
          }
        }
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
        marquee: 'marquee var(--duration) linear infinite',
        'marquee-vertical': 'marquee-vertical var(--duration) linear infinite'
      }
    }
  },
  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')]
};

export default config;

Affected component/components

accordtion

How to reproduce

I was working with a dev project that used the previous shadcn cli on that computer and project

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Operating System:
──────────────────────────────────────────────────────────────────────────────────────────     
Platform         : Windows
Distro           : Microsoft Windows 11 Pro
Release          : 10.0.22631
Codename         :
Kernel           : 10.0.22631
Arch             : x64
Hostname         : poylar-home
Codepage         : 866
Build            : 22631
Hypervisor       :
RemoteSession    :

System:
──────────────────────────────────────────────────────────────────────────────────────────     
Manufacturer     : Gigabyte Technology Co., Ltd.
Model            : B550 AORUS ELITE V2
Version          : Default string
Virtual          :

CPU:
──────────────────────────────────────────────────────────────────────────────────────────     
Manufacturer     : AMD
Brand            : Ryzen 7 5800X 8-Core Processor
Family           : 25
Model            : 33
Stepping         : 2
Speed            : 3.8
Cores            : 16
PhysicalCores    : 8
PerformanceCores : 16
EfficiencyCores  :
Processors       : 1
Socket           : AM4

Before submitting

Poylar commented 2 months ago

https://github.com/shadcn-ui/ui/issues/4796