Implement `stylelint-bezier` package for easy use of bezier design token #2412

yangwooseong · 2024-08-08T06:18:45Z

Self Checklist

I wrote a PR title in English and added an appropriate label to the PR.
I wrote the commit message in English and to follow the Conventional Commits specification.
I added the changeset about the changes that needed to be released. (or didn't have to)
I wrote or updated documentation related to the changes. (or didn't have to) (TODO)
I wrote or updated tests related to the changes. (or didn't have to)
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

resolves Implement a custom stylelint plugin for bezier-react #1996

Summary

bezier-tokens에 있는 토큰이외의 css variable을 사용했을 때 에러나 워닝을 보여주는 stylelint config 패키지를 추가합니다.

Details

공식 문서에는 plugin을 만들 때 export default createPlugin(...) 이런 식으로 소개하고 있는데 막상 해보면 vscode stylelint extension 에서 에러가 나는 등 문제가 있어서 polaris 코드를 참고해서 만들었습니다. 추측컨대 vscode-stylelint 쪽에서 v16 지원을 하고 있지 않아서 stylelint 최신 문법과 호환이 안되고 있어서 발생하는 문제로 보입니다.
V2 token (e.g. --alpha-color-fg-black-darkest) 까지 사용가능하게 했습니다.
styled-components와 scss 모두 대응이 가능합니다. styled-components는 customSyntax를 postcss-styled-syntax로 지정해서 .ts, .tsx 파일을 오버라이드했습니다.
테스트 코드를 작성하고 싶었으나 외부 모듈을 읽고 있어서 작성하기가 까다로워서 생략했습니다.
버저닝 관리를 어떻게 해야할지는 고민입니다. bezier-token 버전이 올라갈 때마다 bezier-react 버전과 stylelint-bezier 버전이 올라가야 하고(이건 changeset이 해줌), 만약 bezier-token 에서 토큰 이름이 바뀌거나 없어진다면 bezier-react 의 peerDeps 에 있는 stylelint-bezier 버전까지 올려야합니다. 제 생각에는 peerDeps에 있는 버전을 관리하는 것은 어쩔 수 없이 수동으로 해야할 것 같은데, 혹시 다른 아이디어 있다면 부탁드립니다..! @sungik-choi

2024-08-08.10.31.22.mov

Breaking change? (Yes/No)

No

References

changeset-bot · 2024-08-08T06:18:48Z

🦋 Changeset detected

Latest commit: 57e83c2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@channel.io/stylelint-bezier	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

channeltalk · 2024-08-08T06:18:49Z

https://desk.channel.io/#/channels/1/team_chats/groups/1237/66b46348c3a60461ec31

github-actions · 2024-08-08T06:24:44Z

Chromatic Report

🚀 Congratulations! Your build was successful!

yangwooseong · 2024-08-08T06:29:55Z

packages/stylelint-bezier/src/plugins/validate-token/index.ts

@@ -76,7 +101,7 @@ const pluginRule: Rule<boolean> = (primary, secondaryOptions = {}) => {
        return
      }

-      if (!allTokens[tokenName as keyof typeof allTokens]) {


z-index-base 의 경우 값이 0이라서 undefined 체크로 변경합니다.

codecov · 2024-08-08T06:38:03Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 83.85%. Comparing base (e2498dd) to head (57e83c2).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2412   +/-   ##
=======================================
  Coverage   83.85%   83.85%           
=======================================
  Files         140      140           
  Lines        2924     2924           
  Branches      882      895   +13     
=======================================
  Hits         2452     2452           
  Misses        467      467           
  Partials        5        5

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

sungik-choi · 2024-08-08T06:42:02Z

버저닝 관리를 어떻게 해야할지는 고민입니다. bezier-token 버전이 올라갈 때마다 bezier-react 버전과 stylelint-bezier 버전이 올라가야 하고(이건 changeset이 해줌), 만약 bezier-token 에서 토큰 이름이 바뀌거나 없어진다면 bezier-react 의 peerDeps 에 있는 stylelint-bezier 버전까지 올려야합니다. 제 생각에는 peerDeps에 있는 버전을 관리하는 것은 어쩔 수 없이 수동으로 해야할 것 같은데, 혹시 다른 아이디어 있다면 부탁드립니다..! @sungik-choi

stylelint-bezier는 bezier-react의 dependency에 위치하지 않아도 될 거 같아요. peerDeps optional 여부를 떠나서 bezier-react의 동작에는 아무런 영향을 주지 않기 때문에 독립적으로 버전 관리하는게 맞다고 생각합니다. 같은 방식이라면 codemod도 peerDeps로 넣어도 이상할 게 없다고 생각해요.

말씀주신 것처럼 매칭되는 버전은 예시처럼 수동으로 README에 추가해서 관리하면 될 거 같습니다.

yangwooseong · 2024-08-08T06:47:11Z

버저닝 관리를 어떻게 해야할지는 고민입니다. bezier-token 버전이 올라갈 때마다 bezier-react 버전과 stylelint-bezier 버전이 올라가야 하고(이건 changeset이 해줌), 만약 bezier-token 에서 토큰 이름이 바뀌거나 없어진다면 bezier-react 의 peerDeps 에 있는 stylelint-bezier 버전까지 올려야합니다. 제 생각에는 peerDeps에 있는 버전을 관리하는 것은 어쩔 수 없이 수동으로 해야할 것 같은데, 혹시 다른 아이디어 있다면 부탁드립니다..! @sungik-choi

stylelint-bezier는 bezier-react의 dependency에 위치하지 않아도 될 거 같아요. peerDeps optional 여부를 떠나서 bezier-react의 동작에는 아무런 영향을 주지 않기 때문에 독립적으로 버전 관리하는게 맞다고 생각합니다. 같은 방식이라면 codemod도 peerDeps로 넣어도 이상할 게 없다고 생각해요.

말씀주신 것처럼 매칭되는 버전은 예시처럼 수동으로 README에 추가해서 관리하면 될 거 같습니다.

아하 그렇네요. 그러면 deps에서 제거하고 README에서 관리하는 것으로 하겠습니다!

sungik-choi

👍 생각보다 코드가 간결하네요

마이너) 패키지간 일관성을 위해 eslint 설정도 추가해주시면 감사하겠습니다

sungik-choi · 2024-08-20T12:05:04Z

.stylelintrc.mjs

+    'bezier/validate-token': [
+      true,
+      {
+        ignorePrefix: ['b-'],


sungik-choi · 2024-08-20T12:05:52Z

packages/stylelint-bezier/README.md

+## Version Matchups
+
+| @channel.io/stylelint-bezier | @channel.io/bezier-react |
+| ---------------------------- | ------------------------ |
+| 0.1.0                        | 2.2.4                    |


sungik-choi · 2024-08-20T12:12:16Z

packages/stylelint-bezier/package.json

+    "dev": "tsc --watch",
+    "build": "tsc --build --verbose"


clean, typecheck 같은 레포지토리 공용 스크립트도 추가해주세요!

- change export statement so that vscode extension does not throw error - referenced to stylelint-shopify for directory structure

…yntax

This reverts commit 9af9389.

…eact

…r and remove ignore files

yangwooseong · 2024-08-21T06:45:02Z

👍 생각보다 코드가 간결하네요

마이너) 패키지간 일관성을 위해 eslint 설정도 추가해주시면 감사하겠습니다

추가하면서 패키지의 .eslintignore 설정을 eslint-config-bezier 설정의 ignorePatterns로 옮겼습니다!

@yangwooseong

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @channel.io/[email protected] ### Minor Changes - Release of `stylelint-bezier` package. It includes stylelint configuration for token validation rules to make `bezier-tokens` easy to use. ([#2412](#2412)) by @yangwooseong Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

yangwooseong added the feat Issue or PR related to a new feature label Aug 8, 2024

yangwooseong self-assigned this Aug 8, 2024

yangwooseong force-pushed the WEB-3629/stylelint-bezier branch from 37045fe to 7f4cd75 Compare August 8, 2024 06:23

yangwooseong commented Aug 8, 2024

View reviewed changes

yangwooseong force-pushed the WEB-3629/stylelint-bezier branch 2 times, most recently from 0832853 to da4b8eb Compare August 8, 2024 06:35

yangwooseong force-pushed the WEB-3629/stylelint-bezier branch from 7de6528 to beb5cb1 Compare August 8, 2024 09:05

yangwooseong marked this pull request as ready for review August 8, 2024 09:09

yangwooseong requested a review from sungik-choi as a code owner August 8, 2024 09:09

sungik-choi reviewed Aug 20, 2024

View reviewed changes

sungik-choi and others added 14 commits August 21, 2024 15:43

feat(stylelint-bezier): scaffolding

ff79b03

feat(stylelint-bezier): copy code working in progress of @ed

6538b96

- change export statement so that vscode extension does not throw error - referenced to stylelint-shopify for directory structure

feat(stylelint-bezier): reinstall bezier-tokens, add postcss-styled-s…

1943b0d

…yntax

feat(stylelint-bezier): include alpha token flatten

9aa0335

feat(stylelint-bezier): set secondary options of rule

68abf52

chore(stylelint-bezier): rm dirty

e44e7f0

feat(stylelint-bezier): test code for typescript

35743ef

Revert "feat(stylelint-bezier): test code for typescript"

97d4336

This reverts commit 9af9389.

chore(stylelint-bezier): update README, packages.jon, LICENSE file

6c50d0c

chore(changeset): add

1c0f418

chore(lockfile): dedupe

4bd5f75

feat(stylelint-bezier): add stylelint-bezier to peerDeps of bezier-react

6a7f31b

feat(stylelint-bezier): add tsx to files

966a60d

chore(stylelint-bezier): resolve stylelint warning

147f561

yangwooseong added 6 commits August 21, 2024 15:43

feat(stylelint-bezier): resolve error in yarn lint command

fba8172

feat(stylelint-bezier): rm stylelint-bezier from peerDeps in bezier-r…

7238ec9

…eact

chore(stylelint-bezier): add .eslintrc.js file

038c916

chore(stylelint-bezier): add common scripts

71b10d8

chore(stylelint-bezier): add .eslintignore

9948d30

refactor(stylelint-bezier): set ignorePatterns in eslint-config-bezie…

57e83c2

…r and remove ignore files

yangwooseong force-pushed the WEB-3629/stylelint-bezier branch from 7965442 to 57e83c2 Compare August 21, 2024 06:43

yangwooseong requested a review from sungik-choi August 21, 2024 06:45

sungik-choi approved these changes Aug 21, 2024

View reviewed changes

yangwooseong merged commit 5c5a10c into channel-io:main Aug 21, 2024
9 checks passed

yangwooseong deleted the WEB-3629/stylelint-bezier branch August 21, 2024 07:52

ch-builder mentioned this pull request Aug 23, 2024

ci(changesets): version packages #2419

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement `stylelint-bezier` package for easy use of bezier design token #2412

Implement `stylelint-bezier` package for easy use of bezier design token #2412

yangwooseong commented Aug 8, 2024 •

edited

Loading

changeset-bot bot commented Aug 8, 2024 •

edited

Loading

channeltalk bot commented Aug 8, 2024

github-actions bot commented Aug 8, 2024 •

edited

Loading

yangwooseong Aug 8, 2024

codecov bot commented Aug 8, 2024 •

edited

Loading

sungik-choi commented Aug 8, 2024

yangwooseong commented Aug 8, 2024

sungik-choi left a comment

sungik-choi Aug 20, 2024

sungik-choi Aug 20, 2024

sungik-choi Aug 20, 2024

yangwooseong commented Aug 21, 2024

Implement stylelint-bezier package for easy use of bezier design token #2412

Implement stylelint-bezier package for easy use of bezier design token #2412

Conversation

yangwooseong commented Aug 8, 2024 • edited Loading

Self Checklist

Related Issue

Summary

Details

Breaking change? (Yes/No)

References

changeset-bot bot commented Aug 8, 2024 • edited Loading

🦋 Changeset detected

channeltalk bot commented Aug 8, 2024

github-actions bot commented Aug 8, 2024 • edited Loading

Chromatic Report

yangwooseong Aug 8, 2024

Choose a reason for hiding this comment

codecov bot commented Aug 8, 2024 • edited Loading

Codecov Report

sungik-choi commented Aug 8, 2024

yangwooseong commented Aug 8, 2024

sungik-choi left a comment

Choose a reason for hiding this comment

sungik-choi Aug 20, 2024

Choose a reason for hiding this comment

sungik-choi Aug 20, 2024

Choose a reason for hiding this comment

sungik-choi Aug 20, 2024

Choose a reason for hiding this comment

yangwooseong commented Aug 21, 2024

Implement `stylelint-bezier` package for easy use of bezier design token #2412

Implement `stylelint-bezier` package for easy use of bezier design token #2412

yangwooseong commented Aug 8, 2024 •

edited

Loading

changeset-bot bot commented Aug 8, 2024 •

edited

Loading

github-actions bot commented Aug 8, 2024 •

edited

Loading

codecov bot commented Aug 8, 2024 •

edited

Loading