Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Writing code to convert Typography interpolation to CSS Variable #1794

Closed
Tracked by #1800
sungik-choi opened this issue Dec 15, 2023 · 1 comment · Fixed by #1841
Closed
Tracked by #1800

Writing code to convert Typography interpolation to CSS Variable #1794

sungik-choi opened this issue Dec 15, 2023 · 1 comment · Fixed by #1841
Assignees
@yangwooseong
Labels
bezier-codemod Issue or PR related to bezier-codemod

Comments

@sungik-choi
Copy link
Contributor

sungik-choi commented Dec 15, 2023 •
edited
Loading

Description

styled backtick 내부의 Typography interpolation을 매칭되는 CSS Variable로 변환하는 codemod 스크립트를 작성합니다.

Reasons for suggestion

styled-components를 제거하면서 더 이상 bezier-react Typography interpolation을 export 하지 않도록 바뀝니다. 이제 Typography 는 CSS Variable / Text 컴포넌트를 통해 사용해야합니다. 이를 사용처에서 쉽게 마이그레이션할 수 있도록 변환 코드 작성이 필요합니다.

원활한 마이그레이션을 위해 변환 코드는 styled backtick 내부에서 1:1 변환을 수행하지만, 이후 typography를 사용하고자 한다면 Text 컴포넌트를 통해서만 접근하여 사용할 수 있도록 유도해야합니다.

Proposed solution

export const Box = styled.div`
  /* AS-IS */
  ${Typography.Size11}
  ${Typography.Size12}
  ${Typography.Size13}
  ${Typography.Size14}
  ${Typography.Size15}
  ${Typography.Size16}
  ${Typography.Size17}
  ${Typography.Size18}
  ${Typography.Size22}
  ${Typography.Size24}
  ${Typography.Size30}
  ${Typography.Size36}

  /* TO-BE */
  font-size: var(--typography-size-11-font-size);
  line-height: var(--typography-size-11-line-height);

  font-size: var(--typography-size-12-font-size);
  line-height: var(--typography-size-12-line-height);

  font-size: var(--typography-size-13-font-size);
  line-height: var(--typography-size-13-line-height);

  font-size: var(--typography-size-14-font-size);
  line-height: var(--typography-size-14-line-height);

  font-size: var(--typography-size-15-font-size);
  line-height: var(--typography-size-15-line-height);
  letter-spacing: var(--typography-size-15-letter-spacing);

  font-size: var(--typography-size-16-font-size);
  line-height: var(--typography-size-16-line-height);
  letter-spacing: var(--typography-size-16-letter-spacing);

  font-size: var(--typography-size-17-font-size);
  line-height: var(--typography-size-17-line-height);
  letter-spacing: var(--typography-size-17-letter-spacing);

  /* NOTE: 18 has not letter spacing */
  font-size: var(--typography-size-18-font-size);
  line-height: var(--typography-size-18-line-height);

  font-size: var(--typography-size-22-font-size);
  line-height: var(--typography-size-22-line-height);
  letter-spacing: var(--typography-size-22-letter-spacing);

  font-size: var(--typography-size-24-font-size);
  line-height: var(--typography-size-24-line-height);
  letter-spacing: var(--typography-size-24-letter-spacing);

  font-size: var(--typography-size-30-font-size);
  line-height: var(--typography-size-30-line-height);
  letter-spacing: var(--typography-size-30-letter-spacing);

  font-size: var(--typography-size-36-font-size);
  line-height: var(--typography-size-36-line-height);
  letter-spacing: var(--typography-size-36-letter-spacing);
`

References
@sungik-choi sungik-choi added the bezier-codemod Issue or PR related to bezier-codemod label Dec 15, 2023
@github-project-automation github-project-automation bot moved this to 📌 Backlog in Bezier React Dec 15, 2023
@sungik-choi sungik-choi changed the title Writing code to Typography interpolation to CSS Variable Writing code to convert Typography interpolation to CSS Variable Dec 15, 2023
@yangwooseong yangwooseong self-assigned this Dec 15, 2023
@sungik-choi
Copy link
Contributor Author

Text 컴포넌트의 typo prop으로 전달되는 Typography 는 Text 컴포넌트만을 타겟으로 한 별도 마이그레이션 코드가 필요합니다(Text 컴포넌트 개선 작업이 진행된 이후 작업예정).

@sungik-choi sungik-choi mentioned this issue Dec 15, 2023
Closed
@yangwooseong yangwooseong moved this from 📌 Backlog to 🏃‍♀️ In progress in Bezier React Dec 18, 2023
@yangwooseong yangwooseong mentioned this issue Dec 19, 2023
Merged
6 tasks
yangwooseong added a commit that referenced this issue Dec 19, 2023
@yangwooseong
Add Typography interpolation transform (#1841)
ee8661b 
<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue
<!-- Please link to issue if one exists -->



<!-- Fixes #0000 -->

- Fixes #1794

## Summary
<!-- Please brief explanation of the changes made -->

- 기존의 mixin-to-css-variable codemod 에 Typography interpolation 을 css
variable 로 변환하는 로직을 추가합니다. 변환 결과에서 font-size, line-height,
letter-spacing 스타일을 css variable 로 하게 되는데, 이것을 개별적으로 사용하지 말고 Text 컴포넌트를
사용하라는 커멘트를 넣었습니다.
- mixin 이라는 용어 대신 interpolation 을 더 자주 쓰는 것 같아서 mixin-to-css-variable 을
interpolation-to-css-variable 로 변경했습니다.

## Details
<!-- Please elaborate description of the changes -->

- `transform` 함수에 try catch 를 추가해서 에러가 나더라도 에러가 나는 파일 이외에서는 변환이 잘 되고
종료하도록 했습니다.
- `removeUnusedNamedImport` 함수를 추가합니다. `ts-morph` 에서
`SourceFile.fixUnusedIdentifiers()` 메서드가 있기는 하지만 이걸 사용하면 안쓰이는 변수를 모두
제거하기 때문에 사이드 이펙트가 발생할 것으로 생각되어 사용하지 않았습니다. 테스트 코드에서도 안쓰는 변수를 제거하기 때문에
불편함이 있었습니다.

### Breaking change? (Yes/No)
<!-- If Yes, please describe the impact and migration path for users -->
- No

## References
<!-- Please list any other resources or points the reviewer should be
aware of -->

- #1794
@github-project-automation github-project-automation bot moved this from 🏃‍♀️ In progress to ✅ Done in Bezier React Dec 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@yangwooseong yangwooseong

Labels
bezier-codemod Issue or PR related to bezier-codemod
Projects
No open projects
Bezier React
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add Typography interpolation transform yangwooseong/bezier-react
2 participants
@yangwooseong @sungik-choi