Writing code to convert foundation interpolation to CSS Variable

[sungik-choi]

Description

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

Reasons for suggestion

styled-components를 제거하면 더 이상 bezier-react에서 Foundation을 ThemeProvider 를 통해 제공하지 않습니다. 이제 CSS Variable(Design token)이 포함된 스타일 시트를 제공하는 형식으로 변경되었으므로, 이를 쉽게 적용할 수 있도록 변환 코드 작성이 필요합니다.

Proposed solution

How to

변환할 토큰의 모든 리스트는 bezier-tokens의 빌드 결과물을 참고해주세요.

export const Box = styled.div`
  /* theme */
  /* AS-IS */
  background-color: ${({ foundation }) => foundation?.theme?.['bg-black-dark']};
  /* TO-BE */
  background-color: var(--bg-black-dark);

  /* subTheme */
  /* AS-IS */
  background-color: ${({ foundation }) => foundation?.subTheme?.['bg-black-dark']};
  /* TO-BE: deprecated! */

  /* spacing */
  /* AS-IS */
  margin: ${({ foundation }) => foundation?.spacing?.s1};
  /* TO-BE: deprecated! */

  /* transition */
  /* AS-IS */
  transition: color 1s ${({ foundation }) => foundation?.transition?.TransitionEasing};
  transition: color ${({ foundation }) => foundation?.transition?.TransitionDuration.S} ease;
  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['background-color', 'box-shadow'])};
  /* TO-BE */
  transition: color 1s var(--transition-timing-function-default);
  transition: color var(--transition-duration-s) ease;
  transition: background-color var(--transition-s), box-shadow var(--transition-s);

  /* rounding */
  /* AS-IS */
  ${({ foundation }) => foundation?.rounding.round4};
  /* TO-BE */
  overflow: hidden; /* Optional */
  border-radius: var(--radius-4);

  /* elevation */
  /* AS-IS */
  ${({ foundation }) => foundation?.elevation?.ev1()};
  /* TO-BE */
  box-shadow: var(--ev-1);

  /* border */
  /* AS-IS */
  ${({ foundation }) => foundation?.border.getBorder(1, foundation?.theme?.['bdr-black-light'], {
    top: false,
    right: false,
    bottom: true,
    left: true,
  })};
  /* TO-BE */
  border-bottom: 1px solid var(--bdr-black-light); /* Or border-block-end */
`

직접 작업해야하는 부분

• subTheme : InvertedThemeProvider 로 사용처를 감싸고, subTheme 를 theme 로 변경
• inverted-*** : InvertedThemeProvider 로 사용처를 감싸고, inverted- prefix를 제거

References

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