hia-frontend-stylelint-config

HIA AI 프로젝트 공통 Stylelint 설정 패키지입니다. stylelint-config-sales-frontend 기반으로 HIA 전용 규칙을 추가합니다.

설치

pnpm add -D hia-frontend-stylelint-config stylelint

stylelint-config-standard, stylelint-config-recess-order 등 peerDependencies는 .npmrc에 auto-install-peers=true 설정 시 자동으로 설치됩니다.

.npmrc

auto-install-peers=true

사용법

// .stylelintrc.js
module.exports = {
  extends: ['hia-frontend-stylelint-config']
};

프로젝트 전용 규칙이 필요하면 덮어쓸 수 있습니다.

// .stylelintrc.js
module.exports = {
  extends: ['hia-frontend-stylelint-config'],
  rules: {
    'color-hex-length': 'long'
  }
};

적용 규칙

속성 순서 (recess-order 기반)

아래 순서로 CSS 속성을 작성해야 합니다.

1. Positioning   position, top, right, bottom, left, z-index
2. Box Model     display, width, height, margin, padding, border
3. Typography    font, color, text-align, line-height
4. Visual        background, opacity, box-shadow
5. Animation     transition, transform, animation

기타

| 규칙 | 설명 | | --------------------------------------- | --------------------------------------- | | at-rule-no-unknown | off (SCSS @mixin, @include 등 허용) | | selector-pseudo-class-no-unknown | off (:global, :local 등 허용) | | declaration-property-value-no-unknown | off |

SCSS 지원

**/*.{scss,sass} 파일에 대해 postcss-scss 커스텀 구문이 자동 적용됩니다.

// 사용 가능
$color: #fff;

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

peerDependencies

| 패키지 | 버전 | | ------------------------------- | ---------- | | stylelint | ^16.18.0 | | stylelint-config-standard | ^38.0.0 | | stylelint-config-recess-order | ^6.0.0 | | postcss-scss | ^4.0.9 |