stylelint 적용기

# 문제상황

팀원간 CSS의 속성 순서를 통일 시키고 싶었다.

어느 정도 컨벤션을 정하긴 했지만 이를 의식적으로 맞추기도 힘들고 헷갈려서 lint의 힘을 빌리고 싶었따.

현재 팀에서 쓰는 css가 emotion(css-in-js)라 관련 prettier, eslint plugin 설정을 적용하기 쉽지 않았다.

stylelint라는 도구를 발견했돠.

# 해결방안

많은 사람들이 [해당 블로그](https://velog.io/@sumi-0011/stylelint-setting)를 보고 따라하다가 실패했던 것 같다.(아마도 v14이거나 이전인듯) 나 역시 관련해서 삽질을 많이 하다가 결국 [공식문서](https://stylelint.io/user-guide/get-started) 정독을 시작했다. 특히 [v16관련 문서](https://stylelint.io/migration-guide/to-16)를 유의했다.

stylelint v16으로 오면서 변화한 부분이 꽤 있었다. (plugin 호환 등)

<사용중인 css 라이브러리 : emotion css, styled 방식>

💡 emotion을 styled 방식이 아닌 css props로 쓰면 stylelint가 적용되지 않는듯 하다.

우선 설치한 패키지들과 .stylelintrc.json 파일은 다음과 같다. json 파일은 src폴더 하위에 두었다.

"script": {
	"lint:style": "stylelint '**/style.ts' --fix"
},
"devDependencies": {
	"@stylelint/postcss-css-in-js": "^0.38.0",
	"stylelint": "^16.7.0",
	"stylelint-config-clean-order": "^6.1.0",
	"stylelint-config-standard": "^36.0.1",
}

//.stylelintrc.json
{ 
  "extends": ["stylelint-config-standard", "stylelint-config-clean-order"],
  "rules": {
    "no-descending-specificity": null
  },
  "overrides": [
    {
      "files": ["*.ts"],
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ]
}

• stylelint : 본체 패키지로 v16임을 유의하자.

• stylelint-config-standard : scss 형식이 아닌 post css 형식일 때 standard

• [stylelint-config-clean-order](https://github.com/kutsan/stylelint-config-clean-order) : 미리 정의된 order rule extention. 이 extention이 없으면 긴 rule을 직접 추가해줘야한다.. override로 덮어씌우거나 커스텀도 지원한다.

• [@stylelint/postcss-css-in-js](https://www.npmjs.com/package/@stylelint/postcss-css-in-js) : emotion을 사용

  만약 @stylelint/[postcss](https://velog.io/@chacha_2/PostCSS%EB%9E%80)-css-in-js 가 없다면 다음과 같은 에러가 난다.

  postcss란? “javaScript 기반 플러그인을 사용하는 소프트웨어 개발 도구로, CSS를 린트하고, 변수 및 믹스인을 지원하고, 향후 CSS 구문, 인라인 이미지 등을 변환할 수 있다” 고 한다

  (근데 npm 주소에는 support 끝났다고 하는데 이 패키지 없으면 에러남..)

  

• postcss-lit : 공식문서에는 설치하라고 되어있는데, 본인은 설치하지 않아도 잘 되었다. 대신 postcss-css-in-js를 customSyntax 옵션에 넣어주었다.

트러블 슈팅 기록

1. 만약 stylelint를 돌렸는데 SCSS 관련 에러가 나온다면 stylelintrc.json 파일 extends에 stylelint-config-standard-scss 가 있는지 확인해보자. stylelint-config-standard로 충분하다. (emotion 기준)

2. stylelint-config-prettier 를 쓰는데 에러가 나거나 npm install에서 의존성 충돌이 생긴다면?

해당 패키지는 v15 미만의 stylelint와 호환 가능하다. 15, 16버전에선 사용할 수 없다.

https://github.com/prettier/stylelint-config-prettier

1. no-descending-specificity stylelint가 계속 잡힌다면?

   https://github.com/stylelint/stylelint/issues/4271

   결론은 해당 rule을 끄도록 override 하라는 것이다.

2. 아직 해결 못한 save시 auto fix

   현재는 cmd+s로 저장 시, stylelint가 바로 적용되지 않는다. script 실행을 해야하는데, vscode의 stylelint 익스텐션을 설치하고 settings.json을 수정하면 된다고 한다.

   [관련 이슈](https://github.com/stylelint/vscode-stylelint/issues/35)

• 참고

  https://velog.io/@s_sangs/CSS-in-JS-Stylelint-feat.-emotion-styled-components

  https://metacode22.github.io/how-to-setup-eslint-stylelint-prettier-husky-and-lint-staged-with-a-nextjs-and-typescript-project/