Available Transforms

replace-custom-seed-design-typography

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

replace-tailwind-typography

npx @seed-design/codemod@latest 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@latest replace-custom-imported-typography-variable <target_path>

replace-custom-seed-design-vars

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

replace-stitches-styled-typography

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

replace-stitches-theme-color

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

replace-css-seed-design-color-variable

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

replace-react-icon

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

replace-seed-design-token-vars

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

replace-semantic-stroke-color

시맨틱 stroke 컬러 토큰을 v0.2.0에 맞춰 마이그레이션하는 transform입니다.

목적

@seed-design/css v0.2.0에서 업데이트된 시맨틱 stroke 컬러 토큰을 자동으로 마이그레이션합니다. 이전 버전의 stroke 토큰들을 새로운 네이밍 규칙에 맞게 변환합니다.

변환 매핑

우선 순위 변환 (1차)

⚠️ 중요: 다음 변환은 반드시 다른 변환보다 먼저 처리됩니다.

일반 변환 (2차)

지원하는 파일 형식

• TypeScript (.ts)
• TypeScript JSX (.tsx)

변환 예시

기본 사용

// Before
import { vars } from "@seed-design/css/vars";
const borderColor = vars.$color.stroke.neutralMuted;
const outlineColor = vars.$color.stroke.neutral;

// After
import { vars } from "@seed-design/css/vars";
const borderColor = vars.$color.stroke.neutralSubtle;
const outlineColor = vars.$color.stroke.neutralMuted;

React 컴포넌트에서의 사용

// Before
const Component = () => (
  <div style={{ 
    borderColor: vars.$color.stroke.control,
    outlineColor: vars.$color.stroke.brand 
  }} />
);

// After
const Component = () => (
  <div style={{ 
    borderColor: vars.$color.stroke.neutralWeak,
    outlineColor: vars.$color.stroke.brandWeak 
  }} />
);

우선 순위의 중요성

이 transform은 2-pass 방식으로 동작합니다:

1. 1차 변환: neutralMuted → neutralSubtle을 먼저 처리
2. 2차 변환: neutral → neutralMuted 등 나머지 변환들을 처리

이 순서가 중요한 이유는 연쇄 변환을 방지하기 위해서입니다. 만약 순서가 바뀌면 neutralMuted가 neutralSubtle로 변환되기 전에 neutral이 neutralMuted로 변환될 수 있어 예상치 못한 결과가 나올 수 있습니다.

변환되지 않는 토큰들

다음 토큰들은 이미 v3 형식이므로 변환되지 않습니다:

• vars.$color.stroke.brandWeak
• vars.$color.stroke.brandSolid
• vars.$color.stroke.neutralSubtle
• vars.$color.stroke.neutralContrast
• vars.$color.stroke.neutralWeak
• 기타 -weak, -solid 접미사를 가진 토큰들

로깅

transform 실행 시 다음과 같은 로그가 생성됩니다:

• .report/replace-semantic-stroke-color-success.log: 성공한 변환들
• .report/replace-semantic-stroke-color-issues.log: 경고 및 실패
• .report/replace-semantic-stroke-color-debug.log: 디버그 정보

npx @seed-design/codemod@latest replace-semantic-stroke-color <target_path>

replace-custom-seed-design-text-component

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

replace-seed-design-token-typography-classname

npx @seed-design/codemod@latest 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@latest replace-stitches-styled-color <target_path>

replace-custom-text-component-color-prop

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

replace-alpha-color

Seed Design V3에서 V3로 알파 컬러 토큰을 업데이트하는 transform입니다. 이 transform은 다음과 같은 알파 컬러 토큰들을 새로운 값으로 변경합니다:

• staticBlackAlpha50 → staticBlackAlpha200
• staticBlackAlpha200 → staticBlackAlpha500
• staticBlackAlpha500 → staticBlackAlpha700
• staticWhiteAlpha200 → staticWhiteAlpha300

주의사항

• 이 transform은 JavaScript/TypeScript 파일과 CSS 파일을 모두 자동으로 처리합니다.
• 한 번만 실행: 동일한 파일에 여러 번 실행하면 연쇄 변환이 발생할 수 있습니다
• V3 → V3 마이그레이션: 이미 V3를 사용 중인 프로젝트에서만 사용하세요
• 백업 권장: 변환 전에 코드를 백업하는 것을 권장합니다
• 순서 중요: 큰 번호부터 작은 번호 순으로 변환하여 연쇄 변환을 방지합니다

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

replace-custom-seed-design-color

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

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

replace-custom-color-to-seed-design-vars-color

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

replace-css-seed-design-typography-variable

npx @seed-design/codemod@latest 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@latest replace-tailwind-color <target_path>