Implement stylelint-bezier package for easy use of bezier design to…

…ken (#2412)

<!--
  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)
- [ ] 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)
- [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 -->

- resolves #1996 

## Summary

<!-- Please brief explanation of the changes made -->

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

## Details

<!-- Please elaborate description of the changes -->

- 공식 문서에는 plugin을 만들 때 export default createPlugin(...) 이런 식으로 소개하고 있는데
막상 해보면 vscode stylelint extension 에서 에러가 나는 등 문제가 있어서 polaris 코드를 참고해서
만들었습니다. 추측컨대 vscode-stylelint 쪽에서 [v16 지원을 하고 있지
않아서](stylelint/vscode-stylelint#540) 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


https://github.com/user-attachments/assets/1b94c6ed-e91f-444d-a8ad-e56a7e6efa79


### 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 -->

- #2102
- https://stylelint.io/awesome-stylelint#custom-syntaxes

---------

Co-authored-by: Ed Sungik Choi <[email protected]>

.changeset/smooth-nails-shout.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/stylelint-bezier': minor
+---
+
+Release of `stylelint-bezier` package. It includes stylelint configuration for token validation rules to make `bezier-tokens` easy to use.

.stylelintrc.mjs

@@ -1,6 +1,6 @@
 /** @type {import('stylelint').Config} */
 export default {
-  extends: ['@channel.io/stylelint-config'],
+  extends: ['@channel.io/stylelint-config', './packages/stylelint-bezier'],
   rules: {
     'selector-class-pattern': [
       // NOTE: Allows Pascal case(components) and Kebab case(states, variants, etc.).
@@ -11,5 +11,12 @@ export default {
     ],
     // NOTE: Set to reduce difficulties caused by selector specificity between components.
     'selector-max-specificity': ['0,2,0'],
+    'bezier/validate-token': [
+      true,
+      {
+        ignorePrefix: ['b-'],
+        severity: 'warning',
+      },
+    ],
   },
 }

README.md

@@ -14,6 +14,7 @@
 | [bezier-figma-plugin](packages/bezier-figma-plugin) | Figma plugin that helps build Bezier design system and increase productivity. |
 | [bezier-tokens](packages/bezier-tokens)             | Design token library for Bezier design system.                                |
 | [bezier-vscode](packages/bezier-vscode)             | VS Code extension for Bezier design system.                                   |
+| [stylelint-bezier](packages/stylelint-bezier)       | Stylelint configuration for Bezier design system.                             |
 
 ## Commands
 

configs/eslint-config-bezier/index.js

@@ -5,6 +5,7 @@ module.exports = {
   extends: ['@channel.io/eslint-config/web'],
   plugins: ['@channel.io/eslint-plugin', 'jest'],
   parser: '@typescript-eslint/parser',
+  ignorePatterns: ['dist', 'node_modules'],
   env: {
     node: true,
   },

package.json

@@ -25,6 +25,7 @@
     "@changesets/get-github-info": "^0.6.0",
     "@changesets/types": "^6.0.0",
     "@channel.io/prettier-config": "^0.0.1",
+    "@channel.io/stylelint-bezier": "0.0.0",
     "@channel.io/stylelint-config": "^2.0.0",
     "@commitlint/cli": "^19.0.0",
     "@commitlint/config-conventional": "^19.0.0",

packages/bezier-codemod/.eslintrc.cjs

@@ -11,4 +11,5 @@ module.exports = {
   rules: {
     'no-restricted-imports': 'off',
   },
+  ignorePatterns: ['**/fixtures/*'],
 }

packages/bezier-react/.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
     project: './tsconfig.eslint.json',
   },
+  ignorePatterns: ['coverage', '__mocks__', '!.storybook'],
   rules: {
     'import/order': [
       'error',

packages/bezier-react/src/components/AlphaButton/Button.module.scss

@@ -186,6 +186,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-primary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-dark);
         }
       }
@@ -202,6 +203,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-secondary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-lighter);
         }
       }
@@ -214,6 +216,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-tertiary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-lightest);
         }
       }

packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss

@@ -139,6 +139,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-primary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-dark);
         }
       }
@@ -155,6 +156,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-secondary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-lighter);
         }
       }

packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss

@@ -112,6 +112,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-primary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-dark);
         }
       }
@@ -128,6 +129,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-secondary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-lighter);
         }
       }

packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss

@@ -167,6 +167,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-primary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-dark);
         }
       }
@@ -183,6 +184,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-secondary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-lighter);
         }
       }
@@ -195,6 +197,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-tertiary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-lightest);
         }
       }

packages/bezier-react/src/components/Button/Button.module.scss

@@ -81,9 +81,11 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
     @each $color-variant in $chromatic-color-variants {
       &:where(.color-#{$color-variant}) {
         color: var(--bgtxt-absolute-white-dark);
+        /* stylelint-disable-next-line bezier/validate-token */
         background-color: var(--bgtxt-#{$color-variant}-normal);
 
         &#{$active-selector} {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color-variant}-dark);
         }
       }
@@ -112,12 +114,14 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
   &:where(.style-secondary) {
     @each $color-variant in $chromatic-color-variants {
       &:where(.color-#{$color-variant}) {
+        /* stylelint-disable bezier/validate-token */
         color: var(--bgtxt-#{$color-variant}-normal);
         background-color: var(--bgtxt-#{$color-variant}-lightest);
 
         &#{$active-selector} {
           background-color: var(--bgtxt-#{$color-variant}-lighter);
         }
+        /* stylelint-enable bezier/validate-token */
       }
     }
 
@@ -154,9 +158,11 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
 
     @each $color-variant in $chromatic-color-variants {
       &:where(.color-#{$color-variant}) {
+        /* stylelint-disable-next-line bezier/validate-token */
         color: var(--bgtxt-#{$color-variant}-normal);
 
         &#{$active-selector} {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color-variant}-lightest);
         }
       }
@@ -191,9 +197,11 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
     @each $color-variant in $chromatic-color-variants {
       &:where(.color-#{$color-variant}) {
         color: var(--bgtxt-absolute-white-dark);
+        /* stylelint-disable-next-line bezier/validate-token */
         background-color: var(--bgtxt-#{$color-variant}-normal);
 
         &#{$active-selector} {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color-variant}-dark);
         }
       }

packages/bezier-react/src/styles/components/elevation.module.scss

@@ -2,6 +2,7 @@ $elevations: 1, 2, 3, 4, 5, 6;
 
 @each $ev in $elevations {
   :where(.elevation-#{$ev}) {
+    /* stylelint-disable-next-line bezier/validate-token */
     box-shadow: var(--ev-#{$ev});
   }
 }

packages/bezier-react/src/styles/components/radius.module.scss

@@ -13,6 +13,7 @@ $radiuses:
 
 @each $radius in $radiuses {
   :where(.radius-#{$radius}) {
+    /* stylelint-disable-next-line bezier/validate-token */
     border-radius: var(--radius-#{$radius});
   }
 }

packages/bezier-react/src/styles/components/z-index.module.scss

@@ -2,6 +2,7 @@ $z-indices: hidden, base, floating, overlay, modal, toast, tooltip, important;
 
 @each $z-index in $z-indices {
   :where(.z-index-#{$z-index}) {
+    /* stylelint-disable-next-line bezier/validate-token */
     z-index: var(--z-index-#{$z-index});
   }
 }

packages/stylelint-bezier/.eslintrc.js

@@ -0,0 +1,11 @@
+/**
+ * @type {import('eslint').Linter.Config}
+ */
+module.exports = {
+  root: true,
+  extends: ['bezier'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.eslint.json',
+  },
+}

packages/stylelint-bezier/README.md

@@ -0,0 +1,53 @@
+# Stylelint Bezier
+
+Stylelint configuration for Bezier design system.
+
+## Installation
+
+### npm
+
+```bash
+npm i -D @channel.io/stylelint-bezier
+```
+
+### yarn
+
+```bash
+yarn add -D @channel.io/stylelint-bezier
+```
+
+## Usage
+
+Extend @channel.io/stylelint-bezier in your stylelint config.
+
+```json
+{
+  "extends": ["@channel.io/stylelint-bezier"]
+}
+```
+
+## Rules
+
+### validate-token
+
+Disallows use of tokens not in bezier-tokens. If you want to use css variable other than bezier design token, you can set a specific prefix and add it to ignorePrefix.
+
+```tsx
+{
+  rule: {
+    'bezier/validate-token': [
+      true,
+      {
+        ignorePrefix: ['b-'],
+        severity: 'warning',
+      },
+    ],
+  }
+}
+```
+
+## Version Matchups
+
+| @channel.io/stylelint-bezier | @channel.io/bezier-react |
+| ---------------------------- | ------------------------ |
+| 0.1.0                        | 2.2.4                    |

packages/stylelint-bezier/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@channel.io/stylelint-bezier",
+  "version": "0.0.0",
+  "description": "Stylelint configuration for Bezier design system.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/channel-io/bezier-react",
+    "directory": "packages/stylelint-bezier"
+  },
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc --build --verbose",
+    "dev": "tsc --watch",
+    "lint": "TIMING=1 eslint --cache .",
+    "typecheck": "tsc --noEmit",
+    "clean": "run-s 'clean:*'",
+    "clean:build": "rm -rf dist",
+    "clean:cache": "rm -rf node_modules .turbo .eslintcache stats.html"
+  },
+  "author": "Channel Corp.",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@channel.io/bezier-tokens": "0.2.6"
+  },
+  "devDependencies": {
+    "eslint-config-bezier": "workspace:*",
+    "postcss-styled-syntax": "^0.6.4",
+    "tsconfig": "workspace:*"
+  },
+  "peerDependencies": {
+    "stylelint": ">=16.0.0"
+  }
+}

packages/stylelint-bezier/src/index.ts

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: ['./plugins/validate-token'],
+  rules: {
+    'bezier/validate-token': true,
+  },
+  overrides: [
+    {
+      files: ['**/*.{ts,tsx}'],
+      customSyntax: 'postcss-styled-syntax',
+    },
+  ],
+}