Writing code to convert z-index constant interpolation to CSS Variable #1793
Assignees
Labels
bezier-codemod
Issue or PR related to bezier-codemod
Comments
sungik-choi
added
enhancement
sungik-choi
removed
the
enhancement
|
z-index가 style object 내부에 들어가는 케이스도 고려가 되면 좋을 거 같습니다. const overlayStyle: React.CSSProperties = {
// AS-IS
zIndex: ZIndex.Tooltip,
// TO-BE
zIndex: 'var(--z-index-tooltip)',
} |
Closed
6 tasks
yangwooseong
added a commit
that referenced
this issue
Dec 22, 2023
<!-- 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 #1793 ## Summary <!-- Please brief explanation of the changes made --> - #1844 머지 후 rebase 예정 (from [252c358](252c358)) - z-index interpolation 을 위한 codemod 를 추가합니다. 변환을 고려해야 하는 상황은 다음과 같이 2가지가 있습니다. 1. styled-component 내에서 interpolation 으로 사용될 때 ```tsx // As-is export const Box = styled.div` z-index: ${ZIndex.Hide}; ` // To-be export const Box = styled.div` z-index: var(--z-index-hidden); ` ``` 2. .tsx 파일에서 객체로 사용될 때 ```tsx // As-is const overlayStyle = { zIndex: ZIndex.Tooltip, } // To-be const overlayStyle = { zIndex: 'var(--z-index-tooltip)', } ``` ## Details <!-- Please elaborate description of the changes --> - 2가지 모두 기존에 만들어 놓았던 codemod 를 사용해서 구현가능하기 때문에 특별히 어려운 점은 없었습니다. `${ZIndex.Auto}`의 경우 지워지지 않고 남아있어도 상관없을 듯 하여 변환하게 두었습니다. 데스크 기준으로 사용처가 없기도 합니다. ### 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 --> - #1793
6 tasks
yangwooseong
added a commit
that referenced
this issue
Jan 18, 2024
<!-- 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 --> - #1793 ## Summary <!-- Please brief explanation of the changes made --> - var(--z-index-float) -> var(--z-index-floating) 으로 오타를 수정하고 README에 빠진 내용을 추가합니다. ### 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 --> - None
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
styled backtick 내부의 z-index constant interpolation을 매칭되는 CSS Variable로 변환하는 codemod 스크립트를 작성합니다.
Reasons for suggestion
styled-components를 제거하면서 더 이상 bezier-react z-index constant을 export 하지 않도록 바뀝니다. 이제 기존 ZIndex는 CSS Variable/컴포넌트를 통해 사용해야합니다. 이를 사용처에서 쉽게 마이그레이션할 수 있도록 변환 코드 작성이 필요합니다.
Proposed solution
References
The text was updated successfully, but these errors were encountered: