Writing code to convert common mixin interpolation to CSS Variable

[sungik-choi]

Description

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

Reasons for suggestion

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

Proposed solution

export const Box = styled.div`
  /* AS-IS */
  ${inputTextStyle}
  /* TO-BE */
  color: var(--txt-black-darkest); /* placeholder color는 _base.scss에 정의되어 있음 */

  /* AS-IS */
  ${inputWrapperStyle}
  /* TO-BE */
  box-shadow: var(--input-box-shadow);

  /* AS-IS */
  ${focusedInputWrapperStyle}
  /* TO-BE */
  box-shadow: var(--input-box-shadow-focused);

  /* AS-IS */
  ${erroredInputWrapperStyle}
  /* TO-BE */
  box-shadow: var(--input-box-shadow-invalid);

  /* 변환을 자동화하기 어려운 믹스인들 */

  ${Typography.*}
  /* -> 제거, Text의 typo 옵션을 사용하는 방식으로 대체 */

  ${ellipsis()}
  /* -> 제거, Text의 truncated 옵션으로 대체 */
  /* truncated 옵션이 lineHeight까지 포함할 수 있도록 개선해야 함 */

  ${smoothCorners()}
  /* -> 제거, AlphaSmoothCornersBox를 사용 */

  ${absoluteCenter()}
  /* -> 제거, Center 컴포넌트 등을 통해 제공 예정 */

  ${centeredBackgroundImage()}
  /* -> 제거, 사용처에서 직접 정의하도록 변경 예정  */

  ${disableAutoMinimum()}
  /* -> 제거, 사용처에서 직접 정의하도록 변경 예정 */

  ${hideScrollbars()}
  /* -> 제거, 사용처에서 직접 정의하도록 변경 예정 */

  ${backgroundImageVariable()}
  /* -> 제거, 사용처에서 직접 정의하도록 변경 예정 */
`

References

• Bezier React next roadmap #1578
• Migrating component styling to Sass-based #1733