Skip to content

Commit a008346

Browse files
Merge pull request #114 from NaverPayDev/chore/add-changeset
@naverpay/stylelint-config major update
2 parents 688a2d5 + 8ee4915 commit a008346

File tree

38 files changed

+181
-231
lines changed

38 files changed

+181
-231
lines changed

.changeset/add-major-changeset.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@naverpay/stylelint-config": major
3+
---
4+
5+
update @naverpay/stylelint-config dependencies
6+
7+
PR: [new canary workflow & stylelint-config](https://github.com/NaverPayDev/code-style/pull/111)
Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
# @naverpay/stylelint-config
2+
3+
네이버페이 스타일 가이드에 맞게 stylelint-config 패키지를 제공합니다.
4+
5+
## Install
6+
7+
**stylelint**, **@naverpay/stylelint-config** 패키지를 설치합니다.
8+
9+
```bash
10+
npm install -D stylelint@^16 @naverpay/stylelint-config
11+
```
12+
13+
## Configure
14+
15+
`stylelint.config.mjs` 파일을 생성합니다. `defaultSeverity` 의 default 값은 `warning` 입니다.
16+
17+
```js
18+
/** @type {import('stylelint').Config} */
19+
const config = {
20+
extends: ['@naverpay/stylelint-config'],
21+
defaultSeverity: 'error',
22+
rules: {},
23+
}
24+
25+
export default config
26+
```
27+
28+
> pure esm 만을 지원합니다. `.mjs`로 파일을 만드시거나, `type: "module"`을 추가해주세요.
29+
30+
## CLI
31+
32+
package.json에 스크립트를 추가하여 format 검사를 할 수 있습니다.
33+
34+
```jsonc
35+
// package.json
36+
{
37+
"scripts": {
38+
"stylelint": "stylelint '**/*.{css,scss}'",
39+
"stylelint:fix": "stylelint --fix '**/*.{css,scss}'",
40+
},
41+
}
42+
```
43+
44+
> - `[email protected]` 버전 부터 prettier 가 할 수 있는 일을 prettier 에 위임 했기 때문에, stylelint 가 검사하는 파일은 반드시 `prettier`도 실행해야 합니다. <https://github.com/stylelint/stylelint/blob/1c17fb87a2f16f041632e380dd0d600cb3532337/docs/migration-guide/to-15.md>
45+
> - [lefthook](https://github.com/evilmartians/lefthook)을 사용해서 commit 또는 push 전에 스타일 확인을 자동화할 것을 권장합니다.
46+
47+
## Integrating with IDE
48+
49+
### VSCode
50+
51+
[Stylelint 확장 프로그램][Stylelint]을 통해 파일 저장 시 일부 속성에 대해 자동으로 수정할 수 있습니다.
52+
53+
> 스타일린트가 적용되지 않은 프로젝트에서 자동 수정이 되는 것을 방지하기 위해 프로젝트 루트 폴더에 `.vscode/settings.json` 생성합니다.
54+
55+
[Stylelint 확장 프로그램][Stylelint]설치 후 프로젝트 루트 폴더에 `.vscode/settings.json` 을 생성합니다.
56+
57+
```json
58+
{
59+
"css.validate": false,
60+
"less.validate": false,
61+
"scss.validate": false,
62+
"[css]": {
63+
"editor.formatOnSave": false,
64+
"editor.codeActionsOnSave": {
65+
"source.fixAll.stylelint": true
66+
}
67+
},
68+
"[scss]": {
69+
"editor.formatOnSave": false,
70+
"editor.codeActionsOnSave": {
71+
"source.fixAll.stylelint": true
72+
}
73+
},
74+
"stylelint.validate": ["css", "scss"]
75+
}
76+
```
77+
78+
이제 `*.{css,scss}` 파일 저장 시 `stylelint --fix`를 자동으로 실행합니다.
79+
80+
[Stylelint]: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
81+
82+
## Rules
83+
84+
- [at-rule](./src/rules/stylelint/at-rule/README.md)
85+
- [block](./src/rules/stylelint/block/README.md)
86+
- [color](./src/rules/stylelint/color/README.md)
87+
- [comment](./src/rules/stylelint/comment/README.md)
88+
- [declaration](./src/rules/stylelint/declaration/README.md)
89+
- [font](./src/rules/stylelint/font/README.md)
90+
- [function](./src/rules/stylelint/function/README.md)
91+
- [general](./src/rules/stylelint/general/README.md)
92+
- [length](./src/rules/stylelint/length/README.md)
93+
- [media-feature](./src/rules/stylelint/media-feature/README.md)
94+
- [property](./src/rules/stylelint/property/README.md)
95+
- [rule](./src/rules/stylelint/rule/README.md)
96+
- [selector](./src/rules/stylelint/selector/README.md)
97+
- [unit](./src/rules/stylelint/unit/README.md)
98+
- [stylelint-order](./src/rules/stylelint-order/README.md)
99+
- [stylelint-scss](./src/rules/stylelint-scss/README.md)

packages/stylelint-config/README.md

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,35 @@
11
# @naverpay/stylelint-config
22

3-
네이버페이 스타일 가이드에 맞게 stylelint-config 패키지를 제공합니다.
3+
This package provides a stylelint-config compliant with the Naver Pay style guide.
44

55
## Install
66

7-
**stylelint**, **@naverpay/stylelint-config** 패키지를 설치합니다.
7+
Install the **stylelint** and **@naverpay/stylelint-config** packages.
88

99
```bash
10-
npm install -D stylelint@^14.2.0 @naverpay/stylelint-config
10+
npm install -D stylelint@^16 @naverpay/stylelint-config
1111
```
1212

1313
## Configure
1414

15-
`.stylelintrc` 파일을 생성합니다. `defaultSeverity` 의 default 값은 `warning` 입니다.
15+
Create a `stylelint.config.mjs` file. The default value for `defaultSeverity` is `warning`.
1616

17-
```json
18-
{
19-
"extends": ["@naverpay/stylelint-config"],
20-
"defaultSeverity": "error"
17+
```js
18+
/** @type {import('stylelint').Config} */
19+
const config = {
20+
extends: ['@naverpay/stylelint-config'],
21+
defaultSeverity: 'error',
22+
rules: {},
2123
}
24+
25+
export default config
2226
```
2327

28+
> Only pure ESM is supported. Please create the file with an `.mjs` extension or add `"type": "module"` to your `package.json`.
29+
2430
## CLI
2531

26-
package.json에 스크립트를 추가하여 format 검사를 할 수 있습니다.
32+
You can add scripts to your `package.json` to perform format checks.
2733

2834
```jsonc
2935
// package.json
@@ -35,17 +41,18 @@ package.json에 스크립트를 추가하여 format 검사를 할 수 있습니
3541
}
3642
```
3743

38-
> [lefthook](https://github.com/evilmartians/lefthook)을 사용해서 commit 또는 push 전에 스타일 확인을 자동화할 것을 권장합니다.
44+
> - Since `[email protected]`, 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)
45+
> - It is recommended to automate style checks before commits or pushes using [lefthook](https://github.com/evilmartians/lefthook).
3946
4047
## Integrating with IDE
4148

4249
### VSCode
4350

44-
[Stylelint 확장 프로그램][Stylelint]을 통해 파일 저장 시 일부 속성에 대해 자동으로 수정할 수 있습니다.
51+
With the [Stylelint extension][Stylelint], some properties can be automatically fixed on file save.
4552

46-
> 스타일린트가 적용되지 않은 프로젝트에서 자동 수정이 되는 것을 방지하기 위해 프로젝트 루트 폴더에 `.vscode/settings.json` 생성
53+
> To prevent auto-fixing in projects not using Stylelint, create a `.vscode/settings.json` file in your project's root folder.
4754
48-
[Stylelint 확장 프로그램][Stylelint]설치 후 프로젝트 루트 폴더에 `.vscode/settings.json` 을 생성합니다.
55+
After installing the [Stylelint extension][Stylelint], create a `.vscode/settings.json` file in your project's root folder.
4956

5057
```json
5158
{
@@ -68,9 +75,9 @@ package.json에 스크립트를 추가하여 format 검사를 할 수 있습니
6875
}
6976
```
7077

71-
이제 `*.{css,scss}` 파일 저장 시 `stylelint --fix`를 자동으로 실행합니다.
78+
Now, `stylelint --fix` will run automatically when you save `*.{css,scss}` files.
7279

73-
[Stylelint]: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
80+
[stylelint]: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
7481

7582
## Rules
7683

@@ -84,12 +91,9 @@ package.json에 스크립트를 추가하여 format 검사를 할 수 있습니
8491
- [general](./src/rules/stylelint/general/README.md)
8592
- [length](./src/rules/stylelint/length/README.md)
8693
- [media-feature](./src/rules/stylelint/media-feature/README.md)
87-
- [number](./src/rules/stylelint/number/README.md)
8894
- [property](./src/rules/stylelint/property/README.md)
8995
- [rule](./src/rules/stylelint/rule/README.md)
9096
- [selector](./src/rules/stylelint/selector/README.md)
91-
- [string](./src/rules/stylelint/string/README.md)
9297
- [unit](./src/rules/stylelint/unit/README.md)
93-
- [value](./src/rules/stylelint/value/README.md)
9498
- [stylelint-order](./src/rules/stylelint-order/README.md)
9599
- [stylelint-scss](./src/rules/stylelint-scss/README.md)

packages/stylelint-config/index.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
const postcss = require('postcss')
2-
const postcssScss = require('postcss-scss')
1+
import postcss from 'postcss'
2+
import postcssScss from 'postcss-scss'
33

4-
const stylelintRule = require('./src/rules/stylelint')
5-
const stylelintRuleOrder = require('./src/rules/stylelint-order')
6-
const stylelintRuleSCSS = require('./src/rules/stylelint-scss')
4+
import {stylelintRule} from './src/rules/stylelint/index.js'
5+
import {stylelintRuleOrder} from './src/rules/stylelint-order/index.js'
6+
import {stylelintRuleSCSS} from './src/rules/stylelint-scss/index.js'
77

8-
module.exports = {
8+
export default {
99
overrides: [
1010
{
1111
files: ['**/*.css'],
@@ -22,8 +22,8 @@ module.exports = {
2222
plugins: ['stylelint-scss', 'stylelint-order'],
2323
rules: {
2424
...stylelintRule,
25-
...stylelintRuleSCSS,
2625
...stylelintRuleOrder,
26+
...stylelintRuleSCSS,
2727
},
2828
defaultSeverity: 'warning',
2929
}

packages/stylelint-config/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
"keywords": [
66
"naverpay",
77
"stylelint",
8-
"stylelint-config"
8+
"stylelint-config",
9+
"postcss",
10+
"postcss-scss"
911
],
1012
"homepage": "https://github.com/NaverPayDev/code-style",
1113
"repository": {
@@ -15,6 +17,7 @@
1517
},
1618
"license": "MIT",
1719
"author": "@NaverPayDev/frontend",
20+
"type": "module",
1821
"main": "index.js",
1922
"dependencies": {
2023
"stylelint": "^16.19.1",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
module.exports = {
1+
export const stylelintRuleOrder = {
22
'order/order': [
33
'custom-properties',
44
'dollar-variables',

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
module.exports = {
1+
export const stylelintRuleSCSS = {
22
'scss/at-rule-no-unknown': true,
33
'scss/at-mixin-parentheses-space-before': 'never',
44
'scss/dollar-variable-colon-space-after': 'always',

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,3 @@
77
- `{ 블록 }``@at-rule` 이전에는 **빈 줄**을 사용하지 않는다.
88
- **주석 다음에 위치**하는 `@at-rule` 에는 규칙을 적용하지 않는다.
99
- Scss `@if`, `@else` 에는 규칙을 적용하지 않는다.
10-
- `@at-rule`**항상 소문자**를 사용한다.
11-
- `@at-rule` 다음에는 **공백**을 사용한다.
12-
- `@at-rule``;` 문자 이전에는 **공백**을 사용하지 않는다.
13-
- `@at-rule`과 속성 선언 사이 빈 줄에는 규칙 적용이 불가능하나 **빈 줄** 사용을 지향
Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
module.exports = {
1+
export const atRule = {
22
'at-rule-no-unknown': null,
33
'at-rule-empty-line-before': [
44
'always',
@@ -8,7 +8,4 @@ module.exports = {
88
ignoreAtRules: ['if', 'else'],
99
},
1010
],
11-
'at-rule-name-case': 'lower',
12-
'at-rule-name-space-after': 'always',
13-
'at-rule-semicolon-space-before': 'never',
1411
}

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,3 @@
44

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

0 commit comments

Comments
 (0)