Codemod

@seed-design/codemod는 Seed Design V2에서 V3로 마이그레이션하기 위한 코드 변환 도구예요.

사용 방법

npx @seed-design/codemod <transform> <target_path> <옵션>

사용 가능한 transform 목록을 확인하려면 다음 명령어를 실행해요.

npx @seed-design/codemod --list

옵션

• --list
  • 사용 가능한 transform 목록을 보여줘요.
• --log
  • 로그를 파일로 저장해요.
  • ./에 combined.log와 warnings.log 파일이 생성돼요.
• --parser
  • jscodeshift가 사용할 파서를 지정해요
  • babel | babylon | flow | ts | tsx
  • 기본값: tsx
  • 예시: --parser=babel
• --extensions
  • 변환할 파일 확장자를 지정해요.
  • 지정하지 않으면 <경로> 안의 js,jsx,ts,tsx 파일을 변환해요. (d.ts는 제외)
  • 예시: --extensions="ts,tsx"
• --ignore-config
  • 변환하지 않을 파일 패턴이 정의된 파일을 지정해요.
  • 예시: --ignore-config=".gitignore"

사용 가능한 Transforms

replace-custom-seed-design-typography

npx @seed-design/codemod replace-custom-seed-design-typography <target_path>

replace-tailwind-typography

npx @seed-design/codemod replace-tailwind-typography <target_path>

replace-custom-imported-typography-variable

Seed Design V2에서 V3로 마이그레이션 시 import된 타이포그래피 변수를 변환합니다.

기능

• 타이포그래피 관련 import 문을 찾아 변수명을 변환합니다.
• 변수가 사용된 모든 위치(템플릿 리터럴, 객체 속성 등)를 찾아 업데이트합니다.
• typography.mjs의 매핑 정보에 따라 V2 타이포그래피 변수를 V3로 변환합니다.
• 같은 V3 토큰으로 변환되는 중복 import를 제거합니다 (예: subtitle1Regular, bodyM1Regular가 모두 t5Regular로 변환되면 t5Regular는 한 번만 import).
• 별칭(alias)으로 import된 변수명은 유지합니다 (예: bodyM1Regular as customTypo에서 t5Regular as customTypo로 변환).

npx @seed-design/codemod replace-custom-imported-typography-variable <target_path>

replace-custom-seed-design-vars

npx @seed-design/codemod replace-custom-seed-design-vars <target_path>

replace-stitches-styled-typography

npx @seed-design/codemod replace-stitches-styled-typography <target_path>

replace-stitches-theme-color

npx @seed-design/codemod replace-stitches-theme-color <target_path>

replace-css-seed-design-color-variable

npx @seed-design/codemod replace-css-seed-design-color-variable <target_path>

replace-react-icon

npx @seed-design/codemod replace-react-icon <target_path>

replace-seed-design-token-vars

npx @seed-design/codemod replace-seed-design-token-vars <target_path>

replace-custom-seed-design-text-component

npx @seed-design/codemod replace-custom-seed-design-text-component <target_path>

replace-seed-design-token-typography-classname

npx @seed-design/codemod replace-seed-design-token-typography-classname <target_path>

replace-stitches-styled-color

Stitches로 스타일링된 컴포넌트의 색상을 V3 형식으로 변환해요.

변환 내용

• Stitches styled() 함수에서 사용된 Seed Design V2 색상 토큰을 V3 색상 토큰으로 변환합니다.
• 모든 색상 관련 스타일 속성(color, backgroundColor, borderColor 등)을 지원합니다.
• 상태 변이(variants)에 적용된 색상 변경도 함께 변환합니다.

대상 파일

• .tsx, .jsx, .ts, .js 파일에서 Stitches 스타일링 사용 부분

주의사항

• 기존 코드의 구조와 포맷을 최대한 유지하면서 색상 값만 변경합니다.
• 커스텀 색상 값이나 CSS 변수는 변환하지 않습니다.

npx @seed-design/codemod replace-stitches-styled-color <target_path>

replace-custom-text-component-color-prop

npx @seed-design/codemod replace-custom-text-component-color-prop <target_path>

replace-custom-seed-design-color

커스텀 Seed Design 컬러 토큰을 V3 형식으로 변환하는 트랜스폼

npx @seed-design/codemod replace-custom-seed-design-color <target_path>

replace-css-seed-design-typography-variable

npx @seed-design/codemod replace-css-seed-design-typography-variable <target_path>

replace-tailwind-color

Tailwind CSS 색상 클래스를 Seed Design V3 형식으로 변환해요.

변환 내용

• Seed Design V2의 색상 클래스 네이밍을 V3 형식으로 변환합니다.
• text-, bg-, border- 등의 접두사를 가진 Tailwind 색상 클래스를 변환합니다.
• 색상 강도(shade)에 따른 변환 매핑을 적용합니다.

변환 예시

• text-carrot-500 → text-static-orange-base
• bg-salmon-100 → bg-static-red-light
• border-navy-900 → border-static-blue-dark

대상 파일

• .tsx, .jsx, .ts, .js, .html, .css 파일에서 Tailwind 클래스를 사용하는 부분

주의사항

• className 문자열, 템플릿 리터럴, 배열 형태 모두 지원합니다.
• Tailwind 동적 클래스 조합(clsx, cx, classnames 등)도 변환됩니다.

npx @seed-design/codemod replace-tailwind-color <target_path>