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

.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',
+    },
+  ],
+}