youthfulhps / tailwind-converter

Converts files written in styled-components to tailwindCSS.

tailwind-converter's Issues

feature: scraper

styled-components

1. 우선 단일 파일 대상.
   2.styled 로 선언된 컴포넌트를 스타일과 함께 파싱해온다.

Troubleshooting: cli에서 본 패키지의 스크립트를 실행

1. bin 폴더 생성, index.js 작성

#! /usr/bin/env node
console.log('Hello world");

2. package.json 수정

{
  ...
  "bin": {
    "hello": "./bin/index.js"
  }
}

3. pnpm 글로벌 설치
   글로벌 설치를 위해서 본 패키지 배포가 필요한데, 아직 배포를 안했으니 로컬에서 pnpm을 속여 설치해야함. + 앞서서 pnpm 글로벌 설치 환경이 필요

~$ pnpm install -g {패키지 로컬 디렉토리 경로}

치면 에러가 발생하는데, pnpm에서 글로벌 설치를 위해서 경로 설정을 하라는 이야기.
그대로 따라해주면 됨.

4. 설치되었다면, 위 package.json에 추가한 bin 스크립트 명령어를 실행해봄.

~$ hello
> Hello world

6. good..

정의된 컴포넌트와 해당 컴포넌트 사용처를 어떻게 매핑시킬 것인가

컴포넌트 사용처에서 궁극적으로 classNames에 정의된 스타일을 주입하려면 아래 객체 키까지 접근해야 한다.

ast.program.body[4].body.body[0].argument.openingElement.attributes[0].value.extra.rawValue
ast.program.body[4].body.body[0].argument.openingElement.attributes[0].value.extra.raw
ast.program.body[4].body.body[0].argument.openingElement.attributes[0].value.value

• 컴포넌트명까지 태그로 변경해주어야 함.

1. 여기서 program.body에 몇번째 인덱스에 JSXElement를 반환하는 FunctionDeclaration 타입의 declaration이 있는지 알아야 한다. (body 인덱스 또한 함께 저장)
2. ast.program.body[0].body.body는 함수 선언 내부에서 사용된 statement들이 배열로 저장되어 있는데 그 중 몇번째 인덱스의 문이 반환문인지 알아야 한다. (반환문 인덱스도 저장)
3. ast.program.body[4].body.body[0].argument.openingElement.attributes[0] 에서 몇번 attribute에 classNames가 정의되어 있는지도 알아야 함

전처리된 AST에서 styled를 통한 컴포넌트 정의로서 간주할 수 있는 구조 파악

1. ast.program.body 배열이 가지고 있는 declarations 중 선언 타입이 VariableDeclaration인 경우
2. 해당 declaration의 id.type === Identifier 인 경우
3. 해당 declaration의 init.type === TaggedTemplateExpression 인 경우
4. 해당 declaration의 init.tag.object.type === Identifier 이고, init.tag.object.name === styled인 경우

추출하고자 하는 속성들은 컴포넌트 이름, 사용된 태그, 스타일 속성이다.

name: declaration.id.name // (변수 선언의 이름)
tag: declaration.init.tag.property.name // (사용된 태그)
styles: declaration.init.quasi.quasis[0].value.raw // (처리되지 않은 스타일 속성 문자열, declaration.init.quasi.type === TemplateLiteral)

extractor를 개선하기 위한 챌린지들

1. 재귀적으로 컴포넌트 사용처에 접근하기 (children, silbing)
2. returnStatement가 하나의 함수에 다중이라면 (가령, if문으로 감싸져 있다던지, 삼항 연산자로 반환한다던지,,)