Skip to content

Commit 5c5a10c

Browse files
yangwooseongsungik-choi
yangwooseong
and
sungik-choi
authored
Implement stylelint-bezier package for easy use of bezier design token (#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]>
1 parent e2498dd commit 5c5a10c

File tree

30 files changed

+369
-429
lines changed

30 files changed

+369
-429
lines changed

‎.changeset/smooth-nails-shout.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@channel.io/stylelint-bezier': minor
3+
---
4+
5+
Release of `stylelint-bezier` package. It includes stylelint configuration for token validation rules to make `bezier-tokens` easy to use.

‎.stylelintrc.mjs

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/** @type {import('stylelint').Config} */
22
export default {
3-
extends: ['@channel.io/stylelint-config'],
3+
extends: ['@channel.io/stylelint-config', './packages/stylelint-bezier'],
44
rules: {
55
'selector-class-pattern': [
66
// NOTE: Allows Pascal case(components) and Kebab case(states, variants, etc.).
@@ -11,5 +11,12 @@ export default {
1111
],
1212
// NOTE: Set to reduce difficulties caused by selector specificity between components.
1313
'selector-max-specificity': ['0,2,0'],
14+
'bezier/validate-token': [
15+
true,
16+
{
17+
ignorePrefix: ['b-'],
18+
severity: 'warning',
19+
},
20+
],
1421
},
1522
}

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
| [bezier-figma-plugin](packages/bezier-figma-plugin) | Figma plugin that helps build Bezier design system and increase productivity. |
1515
| [bezier-tokens](packages/bezier-tokens) | Design token library for Bezier design system. |
1616
| [bezier-vscode](packages/bezier-vscode) | VS Code extension for Bezier design system. |
17+
| [stylelint-bezier](packages/stylelint-bezier) | Stylelint configuration for Bezier design system. |
1718

1819
## Commands
1920

‎configs/eslint-config-bezier/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ module.exports = {
55
extends: ['@channel.io/eslint-config/web'],
66
plugins: ['@channel.io/eslint-plugin', 'jest'],
77
parser: '@typescript-eslint/parser',
8+
ignorePatterns: ['dist', 'node_modules'],
89
env: {
910
node: true,
1011
},

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@changesets/get-github-info": "^0.6.0",
2626
"@changesets/types": "^6.0.0",
2727
"@channel.io/prettier-config": "^0.0.1",
28+
"@channel.io/stylelint-bezier": "0.0.0",
2829
"@channel.io/stylelint-config": "^2.0.0",
2930
"@commitlint/cli": "^19.0.0",
3031
"@commitlint/config-conventional": "^19.0.0",

‎packages/bezier-codemod/.eslintignore

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎packages/bezier-codemod/.eslintrc.cjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,5 @@ module.exports = {
1111
rules: {
1212
'no-restricted-imports': 'off',
1313
},
14+
ignorePatterns: ['**/fixtures/*'],
1415
}

‎packages/bezier-figma-plugin/.eslintignore

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎packages/bezier-icons/.eslintignore

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎packages/bezier-react/.eslintignore

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎packages/bezier-react/.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ module.exports = {
99
tsconfigRootDir: __dirname,
1010
project: './tsconfig.eslint.json',
1111
},
12+
ignorePatterns: ['coverage', '__mocks__', '!.storybook'],
1213
rules: {
1314
'import/order': [
1415
'error',

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
186186
&:where(.variant-primary) {
187187
@each $color in $chromatic-colors {
188188
&:where(.color-#{'' + $color}) {
189+
/* stylelint-disable-next-line bezier/validate-token */
189190
background-color: var(--bgtxt-#{$color}-dark);
190191
}
191192
}
@@ -202,6 +203,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
202203
&:where(.variant-secondary) {
203204
@each $color in $chromatic-colors {
204205
&:where(.color-#{'' + $color}) {
206+
/* stylelint-disable-next-line bezier/validate-token */
205207
background-color: var(--bgtxt-#{$color}-lighter);
206208
}
207209
}
@@ -214,6 +216,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
214216
&:where(.variant-tertiary) {
215217
@each $color in $chromatic-colors {
216218
&:where(.color-#{'' + $color}) {
219+
/* stylelint-disable-next-line bezier/validate-token */
217220
background-color: var(--bgtxt-#{$color}-lightest);
218221
}
219222
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
139139
&:where(.variant-primary) {
140140
@each $color in $chromatic-colors {
141141
&:where(.color-#{'' + $color}) {
142+
/* stylelint-disable-next-line bezier/validate-token */
142143
background-color: var(--bgtxt-#{$color}-dark);
143144
}
144145
}
@@ -155,6 +156,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
155156
&:where(.variant-secondary) {
156157
@each $color in $chromatic-colors {
157158
&:where(.color-#{'' + $color}) {
159+
/* stylelint-disable-next-line bezier/validate-token */
158160
background-color: var(--bgtxt-#{$color}-lighter);
159161
}
160162
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
112112
&:where(.variant-primary) {
113113
@each $color in $chromatic-colors {
114114
&:where(.color-#{'' + $color}) {
115+
/* stylelint-disable-next-line bezier/validate-token */
115116
background-color: var(--bgtxt-#{$color}-dark);
116117
}
117118
}
@@ -128,6 +129,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
128129
&:where(.variant-secondary) {
129130
@each $color in $chromatic-colors {
130131
&:where(.color-#{'' + $color}) {
132+
/* stylelint-disable-next-line bezier/validate-token */
131133
background-color: var(--bgtxt-#{$color}-lighter);
132134
}
133135
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
167167
&:where(.variant-primary) {
168168
@each $color in $chromatic-colors {
169169
&:where(.color-#{'' + $color}) {
170+
/* stylelint-disable-next-line bezier/validate-token */
170171
background-color: var(--bgtxt-#{$color}-dark);
171172
}
172173
}
@@ -183,6 +184,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
183184
&:where(.variant-secondary) {
184185
@each $color in $chromatic-colors {
185186
&:where(.color-#{'' + $color}) {
187+
/* stylelint-disable-next-line bezier/validate-token */
186188
background-color: var(--bgtxt-#{$color}-lighter);
187189
}
188190
}
@@ -195,6 +197,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
195197
&:where(.variant-tertiary) {
196198
@each $color in $chromatic-colors {
197199
&:where(.color-#{'' + $color}) {
200+
/* stylelint-disable-next-line bezier/validate-token */
198201
background-color: var(--bgtxt-#{$color}-lightest);
199202
}
200203
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,11 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
8181
@each $color-variant in $chromatic-color-variants {
8282
&:where(.color-#{$color-variant}) {
8383
color: var(--bgtxt-absolute-white-dark);
84+
/* stylelint-disable-next-line bezier/validate-token */
8485
background-color: var(--bgtxt-#{$color-variant}-normal);
8586

8687
&#{$active-selector} {
88+
/* stylelint-disable-next-line bezier/validate-token */
8789
background-color: var(--bgtxt-#{$color-variant}-dark);
8890
}
8991
}
@@ -112,12 +114,14 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
112114
&:where(.style-secondary) {
113115
@each $color-variant in $chromatic-color-variants {
114116
&:where(.color-#{$color-variant}) {
117+
/* stylelint-disable bezier/validate-token */
115118
color: var(--bgtxt-#{$color-variant}-normal);
116119
background-color: var(--bgtxt-#{$color-variant}-lightest);
117120

118121
&#{$active-selector} {
119122
background-color: var(--bgtxt-#{$color-variant}-lighter);
120123
}
124+
/* stylelint-enable bezier/validate-token */
121125
}
122126
}
123127

@@ -154,9 +158,11 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
154158

155159
@each $color-variant in $chromatic-color-variants {
156160
&:where(.color-#{$color-variant}) {
161+
/* stylelint-disable-next-line bezier/validate-token */
157162
color: var(--bgtxt-#{$color-variant}-normal);
158163

159164
&#{$active-selector} {
165+
/* stylelint-disable-next-line bezier/validate-token */
160166
background-color: var(--bgtxt-#{$color-variant}-lightest);
161167
}
162168
}
@@ -191,9 +197,11 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
191197
@each $color-variant in $chromatic-color-variants {
192198
&:where(.color-#{$color-variant}) {
193199
color: var(--bgtxt-absolute-white-dark);
200+
/* stylelint-disable-next-line bezier/validate-token */
194201
background-color: var(--bgtxt-#{$color-variant}-normal);
195202

196203
&#{$active-selector} {
204+
/* stylelint-disable-next-line bezier/validate-token */
197205
background-color: var(--bgtxt-#{$color-variant}-dark);
198206
}
199207
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ $elevations: 1, 2, 3, 4, 5, 6;
22

33
@each $ev in $elevations {
44
:where(.elevation-#{$ev}) {
5+
/* stylelint-disable-next-line bezier/validate-token */
56
box-shadow: var(--ev-#{$ev});
67
}
78
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ $radiuses:
1313

1414
@each $radius in $radiuses {
1515
:where(.radius-#{$radius}) {
16+
/* stylelint-disable-next-line bezier/validate-token */
1617
border-radius: var(--radius-#{$radius});
1718
}
1819
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ $z-indices: hidden, base, floating, overlay, modal, toast, tooltip, important;
22

33
@each $z-index in $z-indices {
44
:where(.z-index-#{$z-index}) {
5+
/* stylelint-disable-next-line bezier/validate-token */
56
z-index: var(--z-index-#{$z-index});
67
}
78
}

‎packages/bezier-tokens/.eslintignore

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎packages/bezier-vscode/.eslintignore

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎packages/stylelint-bezier/.eslintrc.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* @type {import('eslint').Linter.Config}
3+
*/
4+
module.exports = {
5+
root: true,
6+
extends: ['bezier'],
7+
parserOptions: {
8+
tsconfigRootDir: __dirname,
9+
project: './tsconfig.eslint.json',
10+
},
11+
}

‎packages/bezier-vscode/LICENSE renamed to ‎packages/stylelint-bezier/LICENSE

File renamed without changes.

‎packages/stylelint-bezier/README.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Stylelint Bezier
2+
3+
Stylelint configuration for Bezier design system.
4+
5+
## Installation
6+
7+
### npm
8+
9+
```bash
10+
npm i -D @channel.io/stylelint-bezier
11+
```
12+
13+
### yarn
14+
15+
```bash
16+
yarn add -D @channel.io/stylelint-bezier
17+
```
18+
19+
## Usage
20+
21+
Extend @channel.io/stylelint-bezier in your stylelint config.
22+
23+
```json
24+
{
25+
"extends": ["@channel.io/stylelint-bezier"]
26+
}
27+
```
28+
29+
## Rules
30+
31+
### validate-token
32+
33+
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.
34+
35+
```tsx
36+
{
37+
rule: {
38+
'bezier/validate-token': [
39+
true,
40+
{
41+
ignorePrefix: ['b-'],
42+
severity: 'warning',
43+
},
44+
],
45+
}
46+
}
47+
```
48+
49+
## Version Matchups
50+
51+
| @channel.io/stylelint-bezier | @channel.io/bezier-react |
52+
| ---------------------------- | ------------------------ |
53+
| 0.1.0 | 2.2.4 |

‎packages/stylelint-bezier/package.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "@channel.io/stylelint-bezier",
3+
"version": "0.0.0",
4+
"description": "Stylelint configuration for Bezier design system.",
5+
"repository": {
6+
"type": "git",
7+
"url": "https://github.com/channel-io/bezier-react",
8+
"directory": "packages/stylelint-bezier"
9+
},
10+
"main": "dist/index.js",
11+
"scripts": {
12+
"build": "tsc --build --verbose",
13+
"dev": "tsc --watch",
14+
"lint": "TIMING=1 eslint --cache .",
15+
"typecheck": "tsc --noEmit",
16+
"clean": "run-s 'clean:*'",
17+
"clean:build": "rm -rf dist",
18+
"clean:cache": "rm -rf node_modules .turbo .eslintcache stats.html"
19+
},
20+
"author": "Channel Corp.",
21+
"license": "Apache-2.0",
22+
"dependencies": {
23+
"@channel.io/bezier-tokens": "0.2.6"
24+
},
25+
"devDependencies": {
26+
"eslint-config-bezier": "workspace:*",
27+
"postcss-styled-syntax": "^0.6.4",
28+
"tsconfig": "workspace:*"
29+
},
30+
"peerDependencies": {
31+
"stylelint": ">=16.0.0"
32+
}
33+
}

‎packages/stylelint-bezier/src/index.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
plugins: ['./plugins/validate-token'],
3+
rules: {
4+
'bezier/validate-token': true,
5+
},
6+
overrides: [
7+
{
8+
files: ['**/*.{ts,tsx}'],
9+
customSyntax: 'postcss-styled-syntax',
10+
},
11+
],
12+
}

0 commit comments

Comments
 (0)