✨ add major changeset for @naverpay/stylelint-config dependencies 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/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,
@@ -13,16 +13,6 @@ module.exports = {
         },
     ],
     '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`)

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

@@ -1,12 +1,5 @@
-module.exports = {
+export const functionRules = {
     'function-calc-no-unspaced-operator': true,
     'function-linear-gradient-no-nonstandard-direction': true,
-    'function-comma-newline-after': 'never-multi-line',
-    'function-comma-newline-before': 'never-multi-line',
-    'function-comma-space-after': 'always',
-    'function-comma-space-before': 'never',
-    'function-max-empty-lines': 0,
     'function-name-case': 'lower',
-    'function-parentheses-space-inside': 'never',
-    'function-whitespace-after': 'always',
 }

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

@@ -2,13 +2,5 @@
 
 ## 규칙
 
-- 파일 내 **중복된 선택자**를 사용하지 않는다.
-- 스타일이 없는 빈 파일은 사용하지 않는다.
-- 파일의 들여쓰기는 **공백 4칸**을 사용한다.
-  - `Tab`을 사용한 경우 공백에 비해 PR에서 코드가 늘어져 보인다..?🤔
-- 파일 내 선언과 선언 사이 **빈 줄은 최대 1줄**만 사용한다.
-  - 단, 주석에는 빈 줄의 제한이 없다.
-- 파일의 **첫 줄에 빈 줄**을 사용하지 않는다.
-- 속성 선언 후 **`;` 은 한 번**만 사용한다.
-- 라인의 끝 불필요한 **공백 문자**를 사용하지 않는다.
-- 파일의 끝(`EOF`)에는 **개행 문자를** 사용한다.
+- 파일 내 **중복된 선택자**를 사용하지 않는다. (`no-duplicate-selectors`)
+- 스타일이 없는 빈 파일은 사용하지 않는다. (`no-empty-source`)

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

@@ -1,15 +1,4 @@
-module.exports = {
+export const general = {
     'no-duplicate-selectors': true,
     'no-empty-source': true,
-    indentation: 4,
-    'max-empty-lines': [1, {ignore: ['comments']}],
-    'no-eol-whitespace': [
-        true,
-        {
-            ignore: ['empty-lines'],
-        },
-    ],
-    'no-missing-end-of-source-newline': true,
-    'no-empty-first-line': true,
-    'no-extra-semicolons': true,
 }

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

@@ -1,32 +1,26 @@
-const atRule = require('./at-rule')
-const block = require('./block')
-const color = require('./color')
-const comment = require('./comment')
-const declaration = require('./declaration')
-const font = require('./font')
-const functionRules = require('./function')
-const general = require('./general')
-const length = require('./length')
-const mediaFeature = require('./media-feature')
-const number = require('./number')
-const property = require('./property')
-const rule = require('./rule')
-const selector = require('./selector')
-const string = require('./string')
-const unit = require('./unit')
-const value = require('./value')
+import {atRule} from './at-rule/index.js'
+import {block} from './block/index.js'
+import {color} from './color/index.js'
+import {comment} from './comment/index.js'
+import {declaration} from './declaration/index.js'
+import {font} from './font/index.js'
+import {functionRules} from './function/index.js'
+import {general} from './general/index.js'
+import {length} from './length/index.js'
+import {mediaFeature} from './media-feature/index.js'
+import {property} from './property/index.js'
+import {rule} from './rule/index.js'
+import {selector} from './selector/index.js'
+import {unit} from './unit/index.js'
 
-module.exports = {
+export const stylelintRule = {
     ...general,
     ...color,
     ...font,
-    ...number,
     ...length,
     ...unit,
-    ...string,
     ...declaration,
     ...property,
-    ...value,
     ...functionRules,
     ...selector,
     ...atRule,

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

@@ -1,3 +1,3 @@
-module.exports = {
+export const length = {
     'length-zero-no-unit': true,
 }

packages/stylelint-config/src/rules/stylelint/media-feature/README.md

@@ -2,11 +2,4 @@
 
 ## 규칙
 
-- 미디어 구문 `:`문자 다음에는 **공백**을 사용한다.
-- 미디어 구문 `:`문자 다음에는 **공백**를 사용하지 않는다.
-- 미디어 구문은 소문자를 사용한다.
-- 미디어 구문 `(`, `)` 다음·이전에 **공백**를 사용하지 않는다.
-- 미디어 구문 범위 연산자 다음에는 **공백**을 사용한다.
-- 미디어 구문 범위 연산자 이전에는 **공백**를 사용하지 않는다.
-- 미디어 구문을 나열할 때 `,`문자 다음에는 **공백**을 사용한다.
-- 미디어 구문을 나열할 때 `,`문자 이전에는 **공백**를 사용하지 않는다.
+- 알려지지 않은 미디어 기능 이름을 사용하지 않는다. (`media-feature-name-no-unknown`)

packages/stylelint-config/src/rules/stylelint/media-feature/index.js

@@ -1,11 +1,3 @@
-module.exports = {
+export const mediaFeature = {
     'media-feature-name-no-unknown': true,
-    'media-feature-colon-space-after': 'always',
-    'media-feature-colon-space-before': 'never',
-    'media-feature-name-case': 'lower',
-    'media-feature-parentheses-space-inside': 'never',
-    'media-feature-range-operator-space-after': 'always',
-    'media-feature-range-operator-space-before': 'always',
-    'media-query-list-comma-space-after': 'always',
-    'media-query-list-comma-space-before': 'never',
 }

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

@@ -3,5 +3,4 @@
 ## 규칙
 
 - **없는 속성**은 사용하지 않는다.
-- 속성은 **소문자**로 선언한다.
 - 축약이 가능한 속성 값은은 **축약 속성 값**을 사용한다.

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

@@ -1,5 +1,4 @@
-module.exports = {
+export const property = {
     'property-no-unknown': true,
-    'property-case': 'lower',
     'shorthand-property-no-redundant-values': true,
 }

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

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

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

@@ -2,16 +2,5 @@
 
 ## 규칙
 
-- 속성 선택자 괄호 안팎으로 **공백**을 사용하지 않는다.
-- 속성 선택자 연산자 다음에는 **공백**를 사용하지 않는다.
-- 속성 선택자 연산자 이전에는 **공백**를 사용하지 않는다.
-- 속성 선택자의 값은 항상 `'`로 묶습니다.
-- 선택자의 결합자 다음에는 **공백**을 사용한다.
-- 선택자의 결합자 이전에는 **공백**을 사용한다.
-- 자손 선택자 앞 **공백**는 한 칸만 필요합니다.
-- 가상 클래스 선택자는 소문자로 선언합니다.
-- 가상 클래스 선택자 괄호 안팎으로 **공백**를 사용하지 않는다.
-- 가상 요소 선택자는 소문자로 선언합니다.
-- 태그 선택자는 소문자로 선언합니다.
-- 여러 선택자를 선언할 경우 `,`문자 앞에 **줄바꿈**을 사용하지 않는다.
-- 여러 선택자를 선언할 경우 `,`문자 앞에 **공백**을 사용하지 않는다.
+- 속성 선택자의 값은 항상 `'` (작은따옴표)로 묶습니다. (`selector-attribute-quotes`)
+- 태그 선택자는 소문자로 선언합니다. (`selector-type-case`)

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

@@ -1,15 +1,4 @@
-module.exports = {
-    'selector-attribute-brackets-space-inside': 'never',
-    'selector-attribute-operator-space-after': 'never',
-    'selector-attribute-operator-space-before': 'never',
+export const selector = {
     'selector-attribute-quotes': 'always',
-    'selector-combinator-space-after': 'always',
-    'selector-combinator-space-before': 'always',
-    'selector-descendant-combinator-no-non-space': true,
-    'selector-pseudo-class-case': 'lower',
-    'selector-pseudo-class-parentheses-space-inside': 'never',
-    'selector-pseudo-element-case': 'lower',
     'selector-type-case': 'lower',
-    'selector-list-comma-newline-before': 'never-multi-line',
-    'selector-list-comma-space-before': 'never',
 }