feat: set panda css to jsx react, syntax template-literal

[hyesungoh]

💡 기능

close #65

🔎 기타

prepare 혹은 pnpm panda codegen --clean 커맨드를 실행해주세요~

[sumi-0011]

panda.config.ts 파일에서

 syntax: 'template-literal',

이 옵션을 넣은 특별한 이유가 있을까요?

[hyesungoh]

panda.config.ts 파일에서

 syntax: 'template-literal',

이 옵션을 넣은 특별한 이유가 있을까요?

요게 백틱으로 시작하는 문법을 지원하는 거여요!!!

css''

[sumi-0011]

해당 PR에 이어서 디자인 시스템의 Button을 cva로 구현해보려고하였어요. 그런데 예상한대로 cva, jsx가 동작하지 않았고 이유를 찾아보던 중 panda/css/cva 폴더, panda/css/sva 폴더등이 생성되지 않고 있는 것을 발견하였습니다.

이부분은 추가하신 template-literals 옵션과 관련이 있는것 같은데, 해당 옵션을 지우면 정상적으로 cva, sva, jsx 폴더들이 생성됩니다. https://panda-css.com/docs/concepts/template-literals

 syntax: 'template-literal',

[지운 후]

---

template-literal 옵션을 사용한다면, emotion.js 등과 같이 밑과 같은 문법을 사용할 수 있고, 대신 sva, cva 등의 방식은 사용 못하는것으로 파악했습니다.

css`
    display: flex;
    align-items: center;
  `

---

그렇다면 template-literal 옵션을 사용할지 말지에 대해 이야기해보는게 좋을 것 같은데 혜성님은 어떻게 생각하시나요? 시도해보지는 않았지만 cva의 대체제인 receipt는 사용 가능할 수도 있을것 같습니다.

개인적인 생각으로는 cva 기능 자체를 사용하지 않는것은 panda css를 사용하는 이유가 없는 것 같아요. 그럴거면 emotion이나 styled-component를 사용하는거랑 차이가 있을까 싶어요

그런데 receipt 기능이 사용 가능하다면 굳이 cva 기능을 사용하지 않아도 된다고 생각합니다. 둘이 비슷한 방식으로 알고있어서요.

[hyesungoh]

@sumi-0011 말씀하신 https://github.com/git-goods/git-animal-client/pull/82#discussion_r1648687638 요 코멘트랑 이후 코멘트가 좀 상충하는데요 ~

https://panda-css.com/docs/concepts/template-literals#caveats

말씀하신 것처럼, 위 공식문서에서 css''와 같은 템플릿 리터럴은 패턴과 레시피가 생성되지 않는다고 설명하고 있어용

---

panda-css를 템플릿 리터럴 설정과 함께 사용 이유에 대해서는 DX 관점과 결과물 관점으로 나뉠 거 같은데

DX(개발자 경험) 관점에서는 말씀하신 도구들과 별로 다르게 느껴지지 않을 거 같긴해용

그치만, 결과물 관점에서는 css 토큰 형식으로 동작하는 것, 제로 런타임인 것 정도의 차이가 있을 거 같네용

---

결국은 트레이드오프일 거 같은데,

익숙한 템플릿 리터럴 문법을 사용하는 것과

말씀하신 cva, 레시피같은 기능을 사용하기 위해 오브젝트 리터럴 문법을 사용하는 것을 선택해야 할 거 같아요.

공식 문서 상에서는 오브젝트 리터럴 문법을 권장하고 있어요

[hyesungoh]

@sumi-0011

추가적으로 recipes(레시피)는 cva를 포함하는 개념으로 이해하시면 좋을 거 같아요

레시피는 더 좋은 개발자 경험과 성능을 위해 제공되는 기능인데요

미리 정의하고 빌드한 스타일을 런타임에서 타입 세이프하게 비쥬얼을 선택한다 ... 정도로 기술되어 있네요 https://panda-css.com/docs/concepts/recipes

아무튼 레시피는 아토믹 레시피와 컨피그 레시피로 나뉘어요

이중에서 아토믹 레시피가 말씀하신 cva입니다

cva는 Class Variance Authority의 약자로, 다음 라이브러리에서 영감을 받았다고 기술되어 있어요 https://cva.style/docs

---

컨피그 레시피의 경우 defineRecipe 함수를 이용해서 선언하고, 판다 css의 설정 파일에 추가하는 방식으로 동작하는 방법입니다

https://panda-css.com/docs/concepts/recipes#defining-the-recipe-1

---

개인적인 의견으로는, 저희 디자인 시스템이 정밀하지 않고 변경이 잦을 거라 예상해요 (사이드 프로젝트이다 보니)

그러니 변경에 유연하게 대처할 수 있으면서 + 개발자의 경험을 보장하는 방법을 선택하면 된다고 생각돼요

물론 가장 중요한 건 프로젝트의 목표인 저희가 찾는 경험이라 생각해 저는 오브젝트 리터럴 + 아토믹 레시피를 해보는 게 좋다고 판단이 드네용

[hyesungoh]

그래서 오브젝트 리터럴 문법으로 변경해 https://github.com/git-goods/git-animal-client/pull/82/commits/a427259e3b96a5f18314372eccb5ebe92c4d2a99 추가 커밋 올렸습니다 👍

[sumi-0011]

그래서 오브젝트 리터럴 문법으로 변경해 a427259 추가 커밋 올렸습니다 👍

그럼 최종적으로 정리하자면, emotion.js처럼 템플릿 리터럴 방식을 사용하는 것이 아니라
panda css에서 보통 사용하는 css({}) 이렇게 사용하거나, cva , sva, jsx등을 사용할 수 있는 방법인 오브젝트 리터럴 문법으로 변경한것으로 이해했습니다.

이제 정상적으로 cva 등이 동작하네요! 감사합니다 :D 기존의 컴포넌트들도 수정해서 올려두겠습니다!