Migrating Tailwind to Panda

// migration/token-map.ts — 손으로 작성하는 매핑표
export const tokenMap = {
  // 색
  'bg-blue-500':         'primary.500',
  'bg-blue-600':         'primary.600',
  'bg-gray-50':          'bg.surface',
  'text-gray-900':       'text.default',
  'text-gray-500':       'text.muted',
 
  // 다크모드 ─ semantic token이 자동 처리하므로 dark: 변형 제거
  'dark:bg-blue-500':    null,           // → primary.500이 dark에서 자동 변경
  'dark:bg-gray-900':    null,           // → bg.surface가 자동
  'dark:text-gray-50':   null,
 
  // Spacing (그대로)
  'px-4':                { px: 4 },
  'py-2':                { py: 2 },
  'p-4':                 { p: 4 },
 
  // Radius
  'rounded-md':          { rounded: 'md' },
  'rounded-lg':          { rounded: 'lg' },
 
  // 의미적 불일치 — 따로 표시
  '__manual__': [
    'space-x-4',         // → flex + gap 으로 변경 권장 (수동)
    'divide-y',          // → border-bottom 패턴 (수동)
  ],
}

# 모든 className 추출 (간단 버전)
grep -rhoE 'className=["\047][^"\047]+' app/ \
  | tr -d 'className="' \
  | tr ' ' '\n' \
  | sort | uniq -c | sort -rn > class-usage.txt

// migration/transform.cjs
const { tokenMap } = require('./token-map')
 
module.exports = function transformer(file, api) {
  const j = api.jscodeshift
  const root = j(file.source)
 
  // 1) className 속성 찾기
  root
    .find(j.JSXAttribute, { name: { name: 'className' } })
    .forEach(path => {
      const value = path.value.value
      // string literal: className="px-4 py-2 ..."
      if (value && value.type === 'Literal') {
        const result = transformClassString(value.value)
        if (result.unknown.length === 0) {
          // 완전 변환 가능 → css({...})로 교체
          replaceWithCssCall(j, path, result.cssObject)
        } else {
          // 일부만 변환 → className + css 혼합
          replaceWithMixed(j, path, result)
        }
      }
    })
 
  return root.toSource({ quote: 'single' })
}
 
function transformClassString(classes) {
  const cssObject = {}
  const unknown = []
  const tailwindKeep = []
 
  for (const cls of classes.split(/\s+/).filter(Boolean)) {
    const mapped = tokenMap[cls]
    if (mapped === null) {
      // skip (예: dark: variant 제거)
    } else if (mapped === undefined) {
      unknown.push(cls)
      tailwindKeep.push(cls)
    } else if (typeof mapped === 'string') {
      // 색만 매핑된 경우
      Object.assign(cssObject, parseBackgroundOrTextClass(cls, mapped))
    } else if (typeof mapped === 'object') {
      Object.assign(cssObject, mapped)
    }
  }
 
  return { cssObject, unknown, tailwindKeep }
}
 
function parseBackgroundOrTextClass(cls, token) {
  if (cls.startsWith('bg-'))   return { bg: token }
  if (cls.startsWith('text-')) return { color: token }
  if (cls.startsWith('border-')) return { borderColor: token }
  return {}
}
 
function replaceWithCssCall(j, path, cssObject) {
  const properties = Object.entries(cssObject).map(([k, v]) =>
    j.objectProperty(
      j.identifier(k),
      typeof v === 'number' ? j.numericLiteral(v) : j.stringLiteral(String(v)),
    )
  )
 
  path.value.value = j.jsxExpressionContainer(
    j.callExpression(j.identifier('css'), [j.objectExpression(properties)])
  )
}
 
function replaceWithMixed(j, path, { cssObject, tailwindKeep }) {
  // className={`${tailwindKeep.join(' ')} ${css({...})}`}
  const cssCall = j.callExpression(
    j.identifier('css'),
    [j.objectExpression(
      Object.entries(cssObject).map(([k, v]) =>
        j.objectProperty(j.identifier(k), j.stringLiteral(String(v)))
      ),
    )],
  )
 
  path.value.value = j.jsxExpressionContainer(
    j.templateLiteral(
      [
        j.templateElement({ raw: tailwindKeep.join(' ') + ' ', cooked: tailwindKeep.join(' ') + ' ' }, false),
        j.templateElement({ raw: '', cooked: '' }, true),
      ],
      [cssCall],
    ),
  )
}

// (transform.cjs 이어서)
const hasCssImport = root.find(j.ImportDeclaration, { source: { value: 'styled-system/css' } }).size() > 0
if (!hasCssImport && root.find(j.CallExpression, { callee: { name: 'css' } }).size() > 0) {
  root.get().node.program.body.unshift(
    j.importDeclaration(
      [j.importSpecifier(j.identifier('css'))],
      j.literal('styled-system/css'),
    ),
  )
}

import { applyTransform } from 'jscodeshift/dist/testUtils'
import transformer from '../transform.cjs'
 
const cases: [string, string, string][] = [
  [
    '단순 utility',
    `<button className="bg-blue-500 text-white px-4 py-2">x</button>`,
    `import { css } from 'styled-system/css';
<button className={css({ bg: 'primary.500', color: 'white', px: 4, py: 2 })}>x</button>`,
  ],
  [
    '다크 variant 제거',
    `<div className="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-50">x</div>`,
    `import { css } from 'styled-system/css';
<div className={css({ bg: 'bg.surface', color: 'text.default' })}>x</div>`,
  ],
  [
    '미매핑 클래스는 보존',
    `<div className="bg-blue-500 some-unknown-class">x</div>`,
    `import { css } from 'styled-system/css';
<div className={\`some-unknown-class \${css({ bg: 'primary.500' })}\`}>x</div>`,
  ],
]
 
describe('tw→panda codemod', () => {
  for (const [name, input, expected] of cases) {
    it(name, () => {
      const out = applyTransform(transformer, {}, { source: input })
      expect(out.trim()).toBe(expected.trim())
    })
  }
})

# 변환 실행 — 한 라우트씩
npx jscodeshift -t migration/transform.cjs \
  --extensions=tsx,ts \
  app/(new)/pricing/

import { test, expect } from '@playwright/test'
 
const routes = [
  '/pricing',
  '/onboarding',
  '/settings',
]
 
for (const route of routes) {
  test(`visual: ${route} (light)`, async ({ page }) => {
    await page.goto(`http://localhost:3000${route}`)
    await expect(page).toHaveScreenshot(`${route.replace(/\//g, '_')}.light.png`, { maxDiffPixelRatio: 0.01 })
  })
 
  test(`visual: ${route} (dark)`, async ({ page }) => {
    await page.emulateMedia({ colorScheme: 'dark' })
    await page.goto(`http://localhost:3000${route}`)
    await expect(page).toHaveScreenshot(`${route.replace(/\//g, '_')}.dark.png`, { maxDiffPixelRatio: 0.01 })
  })
}

# 1) tailwind.config + postcss.config에서 tailwind 제거
# 2) globals.css에서 @tailwind / @import 'tailwindcss' 제거
# 3) package.json에서 tailwindcss 제거
pnpm remove tailwindcss @tailwindcss/typography @tailwindcss/forms
 
# 4) safelist·content config 정리
 
# 5) e2e 전 라우트 재실행 + 시각 회귀 통과 확인

git tag pre-tailwind-removal

git revert <tailwind-removal-commit>

# Tailwind className 잔존 개수
grep -rohE 'className=["\047][^"\047]*\b(bg-|text-|p-|m-|px-|py-)' app/ \
  | wc -l
 
# Panda css() 호출 개수
grep -rohE 'css\(\{' app/ | wc -l
 
# 진척률 = Panda / (Panda + Tailwind)