Implement a custom stylelint plugin for bezier-react

[sungik-choi]

Description

Implement a custom stylelint plugin for bezier-react

Reasons for suggestion

bezier-react v2에서 디자인 토큰에 접근할 수 있는 방법은 2가지가 있습니다.

1. CSS variable을 통한 직접 접근 (e.g. background-color: var(--bg-black-light);)
2. Box, Stack 등 레이아웃 컴포넌트의 인터페이스를 통한 일부 접근 (e.g. backgroundColor="bg-black-light")

2번의 경우 타입스크립트의 도움을 받아 자동 완성 기능을 지원하고 타입 안정성을 보장받을 수 있습니다. 하지만 1번의 경우, 타입스크립트의 도움을 받을 수 없기 때문에 오타 등에 대한 어떠한 안전장치도 존재하지 않습니다.

stylelint plugin을 통해 lint 과정에서 오타 등을 검증함으로서 안정성을 챙긴다면 타입스크립트 만큼은 아니겠지만 CI에 lint 프로세스 추가를 통해 어느정도 안정성을 보장받을 수 있을 거 같습니다.

Proposed solution

• bezier-tokens 의 토큰 데이터를 기반으로 유효한 CSS custom property 이름 규칙을 정의해야합니다.
• 이 경우, 기존 사용처에서 사용하고 있던 커스텀 CSS custom property에서 모두 린트 에러가 발생하게 됩니다. prefix 같은 옵션을 주어서, 특정 prefix가 존재하는 CSS custom property에는 구문 검사를 수행하지 않도록 하면 좋겠습니다. bezier-react를 예로 들면, --b- 라는 prefix가 붙은 CSS custom property에는 린트 규칙을 적용하지 않는 식입니다.
• stylelint plugin의 버전은 항상 올바른 bezier-react 버전과 쌍을 이루어야합니다. 따라서, bezier-react는 같은 bezier-tokens 버전을 의존성으로 가지는 stylelint plugin을 peer dependency로 가져야합니다. stylelint를 사용하지 않는 케이스도 있을 수 있기 때문에, peer dependency meta option을 통해 설치되어있는 경우에만 특정 버전을 강제하는 방식으로 패키지 설정을 하면 좋겠습니다.

References

• https://stylelint.io/developer-guide/plugins/
• https://www.npmjs.com/package/@shopify/stylelint-plugin
• Implement bezier-react VS Code extension #774 : 타입스크립트의 자동 완성 기능을 일부 대체할 수 있습니다.