@naverpay/stylelint-config major update

.changeset/add-major-changeset.md

@@ -0,0 +1,7 @@
+---
+"@naverpay/stylelint-config": major
+---
+
+update @naverpay/stylelint-config dependencies
+
+PR: [new canary workflow & stylelint-config](https://github.com/NaverPayDev/code-style/pull/111)

packages/stylelint-config/README.ko.md

@@ -0,0 +1,99 @@
+# @naverpay/stylelint-config
+
+네이버페이 스타일 가이드에 맞게 stylelint-config 패키지를 제공합니다.
+
+## Install
+
+**stylelint**, **@naverpay/stylelint-config** 패키지를 설치합니다.
+
+```bash
+npm install -D stylelint@^16 @naverpay/stylelint-config
+```
+
+## Configure
+
+`stylelint.config.mjs` 파일을 생성합니다. `defaultSeverity` 의 default 값은 `warning` 입니다.
+
+```js
+/** @type {import('stylelint').Config} */
+const config = {
+  extends: ['@naverpay/stylelint-config'],
+  defaultSeverity: 'error',
+  rules: {},
+}
+
+export default config
+```
+
+> pure esm 만을 지원합니다. `.mjs`로 파일을 만드시거나, `type: "module"`을 추가해주세요.
+
+## CLI
+
+package.json에 스크립트를 추가하여 format 검사를 할 수 있습니다.
+
+```jsonc
+// package.json
+{
+    "scripts": {
+        "stylelint": "stylelint '**/*.{css,scss}'",
+        "stylelint:fix": "stylelint --fix '**/*.{css,scss}'",
+    },
+}
+```
+
+> - `styelint@15.x` 버전 부터 prettier 가 할 수 있는 일을 prettier 에 위임 했기 때문에, stylelint 가 검사하는 파일은 반드시 `prettier`도 실행해야 합니다. <https://github.com/stylelint/stylelint/blob/1c17fb87a2f16f041632e380dd0d600cb3532337/docs/migration-guide/to-15.md>
+> - [lefthook](https://github.com/evilmartians/lefthook)을 사용해서 commit 또는 push 전에 스타일 확인을 자동화할 것을 권장합니다.
+
+## Integrating with IDE
+
+### VSCode
+
+[Stylelint 확장 프로그램][Stylelint]을 통해 파일 저장 시 일부 속성에 대해 자동으로 수정할 수 있습니다.
+
+> 스타일린트가 적용되지 않은 프로젝트에서 자동 수정이 되는 것을 방지하기 위해 프로젝트 루트 폴더에 `.vscode/settings.json` 생성합니다.
+
+[Stylelint 확장 프로그램][Stylelint]설치 후 프로젝트 루트 폴더에 `.vscode/settings.json` 을 생성합니다.
+
+```json
+{
+    "css.validate": false,
+    "less.validate": false,
+    "scss.validate": false,
+    "[css]": {
+        "editor.formatOnSave": false,
+        "editor.codeActionsOnSave": {
+            "source.fixAll.stylelint": true
+        }
+    },
+    "[scss]": {
+        "editor.formatOnSave": false,
+        "editor.codeActionsOnSave": {
+            "source.fixAll.stylelint": true
+        }
+    },
+    "stylelint.validate": ["css", "scss"]
+}
+```
+
+이제 `*.{css,scss}` 파일 저장 시 `stylelint --fix`를 자동으로 실행합니다.
+
+[Stylelint]: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
+
+## Rules
+
+- [at-rule](./src/rules/stylelint/at-rule/README.md)
+- [block](./src/rules/stylelint/block/README.md)
+- [color](./src/rules/stylelint/color/README.md)
+- [comment](./src/rules/stylelint/comment/README.md)
+- [declaration](./src/rules/stylelint/declaration/README.md)
+- [font](./src/rules/stylelint/font/README.md)
+- [function](./src/rules/stylelint/function/README.md)
+- [general](./src/rules/stylelint/general/README.md)
+- [length](./src/rules/stylelint/length/README.md)
+- [media-feature](./src/rules/stylelint/media-feature/README.md)
+- [property](./src/rules/stylelint/property/README.md)
+- [rule](./src/rules/stylelint/rule/README.md)
+- [selector](./src/rules/stylelint/selector/README.md)
+- [unit](./src/rules/stylelint/unit/README.md)
+- [stylelint-order](./src/rules/stylelint-order/README.md)
+- [stylelint-scss](./src/rules/stylelint-scss/README.md)

packages/stylelint-config/README.md

@@ -1,29 +1,35 @@
 # @naverpay/stylelint-config
 
-네이버페이 스타일 가이드에 맞게 stylelint-config 패키지를 제공합니다.
+This package provides a stylelint-config compliant with the Naver Pay style guide.
 
 ## Install
 
-**stylelint**, **@naverpay/stylelint-config** 패키지를 설치합니다.
+Install the **stylelint** and **@naverpay/stylelint-config** packages.
 
 ```bash
-npm install -D stylelint@^14.2.0 @naverpay/stylelint-config
+npm install -D stylelint@^16 @naverpay/stylelint-config
 ```
 
 ## Configure
 
-`.stylelintrc` 파일을 생성합니다. `defaultSeverity` 의 default 값은 `warning` 입니다.
+Create a `stylelint.config.mjs` file. The default value for `defaultSeverity` is `warning`.
 
-```json
-{
-    "extends": ["@naverpay/stylelint-config"],
-    "defaultSeverity": "error"
+```js
+/** @type {import('stylelint').Config} */
+const config = {
+  extends: ['@naverpay/stylelint-config'],
+  defaultSeverity: 'error',
+  rules: {},
 }
+
+export default config
 ```
 
+> Only pure ESM is supported. Please create the file with an `.mjs` extension or add `"type": "module"` to your `package.json`.
+
 ## CLI
 
-package.json에 스크립트를 추가하여 format 검사를 할 수 있습니다.
+You can add scripts to your `package.json` to perform format checks.
 
 ```jsonc
 // package.json
@@ -35,17 +41,18 @@ package.json에 스크립트를 추가하여 format 검사를 할 수 있습니
 }
 ```
 
-> [lefthook](https://github.com/evilmartians/lefthook)을 사용해서 commit 또는 push 전에 스타일 확인을 자동화할 것을 권장합니다.
+> - Since `stylelint@15.x`, formatting rules that Prettier can handle have been delegated to Prettier. Therefore, files linted by Stylelint must also be processed by Prettier. [https://github.com/stylelint/stylelint/blob/1c17fb87a2f16f041632e380dd0d600cb3532337/docs/migration-guide/to-15.md](https://github.com/stylelint/stylelint/blob/1c17fb87a2f16f041632e380dd0d600cb3532337/docs/migration-guide/to-15.md)
+> - It is recommended to automate style checks before commits or pushes using [lefthook](https://github.com/evilmartians/lefthook).
 
 ## Integrating with IDE
 
 ### VSCode
 
-[Stylelint 확장 프로그램][Stylelint]을 통해 파일 저장 시 일부 속성에 대해 자동으로 수정할 수 있습니다.
+With the [Stylelint extension][Stylelint], some properties can be automatically fixed on file save.
 
-> 스타일린트가 적용되지 않은 프로젝트에서 자동 수정이 되는 것을 방지하기 위해 프로젝트 루트 폴더에 `.vscode/settings.json` 생성
+> To prevent auto-fixing in projects not using Stylelint, create a `.vscode/settings.json` file in your project's root folder.
 
-[Stylelint 확장 프로그램][Stylelint]설치 후 프로젝트 루트 폴더에 `.vscode/settings.json` 을 생성합니다.
+After installing the [Stylelint extension][Stylelint], create a `.vscode/settings.json` file in your project's root folder.
 
 ```json
 {
@@ -68,9 +75,9 @@ package.json에 스크립트를 추가하여 format 검사를 할 수 있습니
 }
 ```
 
-이제 `*.{css,scss}` 파일 저장 시 `stylelint --fix`를 자동으로 실행합니다.
+Now, `stylelint --fix` will run automatically when you save `*.{css,scss}` files.
 
-[Stylelint]: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
+[stylelint]: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
 
 ## Rules
 
@@ -84,12 +91,9 @@ package.json에 스크립트를 추가하여 format 검사를 할 수 있습니
 - [general](./src/rules/stylelint/general/README.md)
 - [length](./src/rules/stylelint/length/README.md)
 - [media-feature](./src/rules/stylelint/media-feature/README.md)
-- [number](./src/rules/stylelint/number/README.md)
 - [property](./src/rules/stylelint/property/README.md)
 - [rule](./src/rules/stylelint/rule/README.md)
 - [selector](./src/rules/stylelint/selector/README.md)
-- [string](./src/rules/stylelint/string/README.md)
 - [unit](./src/rules/stylelint/unit/README.md)
-- [value](./src/rules/stylelint/value/README.md)
 - [stylelint-order](./src/rules/stylelint-order/README.md)
 - [stylelint-scss](./src/rules/stylelint-scss/README.md)

packages/stylelint-config/index.js

@@ -1,11 +1,11 @@
-const postcss = require('postcss')
-const postcssScss = require('postcss-scss')
+import postcss from 'postcss'
+import postcssScss from 'postcss-scss'
 
-const stylelintRule = require('./src/rules/stylelint')
-const stylelintRuleOrder = require('./src/rules/stylelint-order')
-const stylelintRuleSCSS = require('./src/rules/stylelint-scss')
+import {stylelintRule} from './src/rules/stylelint/index.js'
+import {stylelintRuleOrder} from './src/rules/stylelint-order/index.js'
+import {stylelintRuleSCSS} from './src/rules/stylelint-scss/index.js'
 
-module.exports = {
+export default {
     overrides: [
         {
             files: ['**/*.css'],
@@ -22,8 +22,8 @@ module.exports = {
     plugins: ['stylelint-scss', 'stylelint-order'],
     rules: {
         ...stylelintRule,
-        ...stylelintRuleSCSS,
         ...stylelintRuleOrder,
+        ...stylelintRuleSCSS,
     },
     defaultSeverity: 'warning',
 }

packages/stylelint-config/package.json

@@ -5,7 +5,9 @@
     "keywords": [
         "naverpay",
         "stylelint",
-        "stylelint-config"
+        "stylelint-config",
+        "postcss",
+        "postcss-scss"
     ],
     "homepage": "https://github.com/NaverPayDev/code-style",
     "repository": {
@@ -15,6 +17,7 @@
     },
     "license": "MIT",
     "author": "@NaverPayDev/frontend",
+    "type": "module",
     "main": "index.js",
     "dependencies": {
         "stylelint": "^16.19.1",

packages/stylelint-config/src/rules/stylelint-order/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export const stylelintRuleOrder = {
     'order/order': [
         'custom-properties',
         'dollar-variables',

packages/stylelint-config/src/rules/stylelint-scss/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export const stylelintRuleSCSS = {
     'scss/at-rule-no-unknown': true,
     'scss/at-mixin-parentheses-space-before': 'never',
     'scss/dollar-variable-colon-space-after': 'always',

packages/stylelint-config/src/rules/stylelint/at-rule/README.md

@@ -7,7 +7,3 @@
   - `{ 블록 }` 내 `@at-rule` 이전에는 **빈 줄**을 사용하지 않는다.
   - **주석 다음에 위치**하는 `@at-rule` 에는 규칙을 적용하지 않는다.
   - Scss `@if`, `@else` 에는 규칙을 적용하지 않는다.
-- `@at-rule`은 **항상 소문자**를 사용한다.
-- `@at-rule` 다음에는 **공백**을 사용한다.
-- `@at-rule`의 `;` 문자 이전에는 **공백**을 사용하지 않는다.
-- `@at-rule`과 속성 선언 사이 빈 줄에는 규칙 적용이 불가능하나 **빈 줄** 사용을 지향

packages/stylelint-config/src/rules/stylelint/at-rule/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export const atRule = {
     'at-rule-no-unknown': null,
     'at-rule-empty-line-before': [
         'always',
@@ -8,7 +8,4 @@ module.exports = {
             ignoreAtRules: ['if', 'else'],
         },
     ],
-    'at-rule-name-case': 'lower',
-    'at-rule-name-space-after': 'always',
-    'at-rule-semicolon-space-before': 'never',
 }

packages/stylelint-config/src/rules/stylelint/block/README.md

@@ -4,9 +4,3 @@
 
 - **스타일 선언이 없는** `{ 블록 }`은 사용하지 않는다.
   - 단, 주석만 있는 경우 오류로 평가하지 않는다.
-- `{ 블록 }`의 닫는 `}` 이전에는 **줄바꿈**을 사용하지 않는다.
-- `{ 블록 }`의 닫는 `}` 다음에는 **줄바꿈**을 사용한다.
-  - Scss `@if`, `@else` 블록에는 규칙을 적용하지 않는다.
-- `{ 블록 }`을 닫는 `}` 이전에는 **줄바꿈**을 사용한다.
-- `{ 블록 }`을 여는 `{` 다음에는 **줄바꿈**을 사용한다.
-- `{ 블록 }`을 여는 `{` 이전에는 **공백**을 사용한다.

packages/stylelint-config/src/rules/stylelint/block/index.js

@@ -1,13 +1,3 @@
-module.exports = {
+export const block = {
     'block-no-empty': [true],
-    'block-closing-brace-empty-line-before': 'never',
-    'block-closing-brace-newline-after': [
-        'always',
-        {
-            ignoreAtRules: ['if', 'else'],
-        },
-    ],
-    'block-closing-brace-newline-before': 'always',
-    'block-opening-brace-newline-after': 'always',
-    'block-opening-brace-space-before': 'always',
 }

packages/stylelint-config/src/rules/stylelint/color/README.md

@@ -6,5 +6,4 @@
 - 색상 값은 `#hex` 단위를 사용한다.
 - 색상 함수 사용 시 `,` 문자를 제거하지 않는다.
 - 색상 값에 예약어(`black`, `white` 등)를 사용하지 않는다.
-- 색상 값에 소문자 `#hex` 단위를 사용한다.
 - 축약이 가능한 `#hex` 단위는 축약하여 사용한다.

packages/stylelint-config/src/rules/stylelint/color/index.js

@@ -1,8 +1,7 @@
-module.exports = {
+export const color = {
     'alpha-value-notation': 'number',
     'color-no-invalid-hex': true,
     'color-function-notation': 'legacy',
     'color-named': 'never',
-    'color-hex-case': 'lower',
     'color-hex-length': 'short',
 }

packages/stylelint-config/src/rules/stylelint/comment/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export const comment = {
     'comment-no-empty': true,
     'comment-empty-line-before': [
         'always',

packages/stylelint-config/src/rules/stylelint/declaration/README.md

@@ -8,16 +8,6 @@
   - 값이 다른 경우 오류로 평가하지 않는다.
 - 축약이 가능한 속성은 축약 속성을 사용한다.
   - `font` 관련 속성은 축약 속성은 규칙을 적용하지 않는다.
-  - `*-top-*`, `*-right-*`, `*-bottom-*`, `*-left-*` 가 모두 선언된 경우만 오류로 평가한다
+  - `*-top-*`, `*-right-*`, `*-bottom-*`, `*-left-*` 가 모두 선언된 경우만 오류로 평가한다.
   - [stylelint가 적용되는 축약 속성](https://stylelint.io/user-guide/rules/list/declaration-block-no-redundant-longhand-properties)
 - 한 줄에 하나의 속성만 선언한다.
-- `!` 문자 다음에는 **공백**을 사용하지 않는다.
-- `!` 문자 이전에는 **공백**을 사용한다.
-- `:` 문자 다음에는 **공백**을 사용한다.
-  - 여러 줄에 걸쳐 값이 선언되는 경우 공백가 아닌 **줄바꿈**을 사용한다.
-- `:` 문자 이전에는 **공백**을 사용하지 않는다.
-- `;` 문자 다음에는 **줄바꿈**을 사용한다.
-- `;` 문자 이전에는 **줄바꿈**을 사용하지 않는다.
-- `;` 문자 다음에는 **공백**을 사용하지 않는다.
-- `;` 문자 이전에는 **공백**을 사용하지 않는다.
-- 속성 선언 끝에 항상 `;` 문자를 사용한다.

packages/stylelint-config/src/rules/stylelint/declaration/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export const declaration = {
     'declaration-block-no-duplicate-custom-properties': true,
     'declaration-block-no-duplicate-properties': [
         true,
@@ -9,20 +9,10 @@ module.exports = {
     'declaration-block-no-redundant-longhand-properties': [
         true,
         {
-            ignoreShorthands: ['font'],
+            ignoreShorthands: ['font', 'inset', 'background', 'overflow'],
         },
     ],
     'declaration-block-single-line-max-declarations': 1,
-    'declaration-bang-space-after': 'never',
-    'declaration-bang-space-before': 'always',
-    'declaration-colon-newline-after': 'always-multi-line',
-    'declaration-colon-space-after': 'always-single-line',
-    'declaration-colon-space-before': 'never',
-    'declaration-block-semicolon-newline-after': 'always',
-    'declaration-block-semicolon-newline-before': 'never-multi-line',
-    'declaration-block-semicolon-space-after': 'always-single-line',
-    'declaration-block-semicolon-space-before': 'never',
-    'declaration-block-trailing-semicolon': 'always',
     'declaration-empty-line-before': [
         'always',
         {

packages/stylelint-config/src/rules/stylelint/font/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export const font = {
     'font-family-no-duplicate-names': true,
     'font-family-no-missing-generic-family-keyword': true,
 }

packages/stylelint-config/src/rules/stylelint/function/README.md

@@ -2,14 +2,7 @@
 
 ## 규칙
 
-- `calc()` 함수 계산식 Operator(+, - ...)의 앞·뒤에 **공백**을 사용한다.
-- `linear-gradient`를 사용할 경우 **표준 방향 값**을 사용한다.
-  - 표준 방향 값 참고 : [MDN/linear-gradient#syntax](^1)
-- 함수 파라미터 구분자 `,` 다음에는 **줄바꿈**을 사용하지 않는다.
-- 함수 파라미터 구분자 `,` 이전에는 **줄바꿈**을 사용하지 않는다.
-- 함수 파라미터 구분자 `,` 다음에는 **공백**을 사용한다.
-- 함수 파라미터 구분자 `,` 이전에는 **공백**을 사용하지 않는다.
-- 함수 선언 내 **줄바꿈**을 사용하지 않는다.
-- 함수 **이름은 소문자**를 사용한다.
-- 함수 선언 내 `)`, `(` 앞·뒤로 **공백**을 사용하지 않는다.
-- 함수와 함수 사이에는 **공백**을 사용한다.
+- `calc()` 함수 계산식 Operator(+, - ...)의 앞·뒤에 **공백**을 사용한다. (`function-calc-no-unspaced-operator`)
+- `linear-gradient`를 사용할 경우 **표준 방향 값**을 사용한다. (`function-linear-gradient-no-nonstandard-direction`)
+  - 표준 방향 값 참고 : [MDN/linear-gradient\#syntax](https://www.google.com/search?q=https://developer.mozilla.org/ko/docs/Web/CSS/gradient/linear-gradient%23%25EA%25B5%25AC%25EB%25AC%25B8)
+- 함수 **이름은 소문자**를 사용한다. (`function-name-case`)