stylelint 적용기(emotion/styled)

# 문제상황

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

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

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

stylelint라는 도구를 발견했돠.

# 해결방안

많은 사람들이 해당 블로그를 보고 따라하다가 실패했던 것 같다.(아마도 v14이거나 이전인듯) 나 역시 관련해서 삽질을 많이 하다가 결국 공식문서 정독을 시작했다. 특히 v16관련 문서를 유의했다.

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 : 미리 정의된 order rule extention. 이 extention이 없으면 긴 rule을 직접 추가해줘야한다.. override로 덮어씌우거나 커스텀도 지원한다.
• @stylelint/postcss-css-in-js : emotion을 사용
  만약 @stylelint/postcss-css-in-js 가 없다면 다음과 같은 에러가 난다.
  postcss란? “javaScript 기반 플러그인을 사용하는 소프트웨어 개발 도구로, CSS 를 린트하고, 변수 및 믹스인을 지원하고, 향후 CSS 구문, 인라인 이미지 등을 변환할 수 있다” 고 한다!
  

  

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

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

팀 깃헙 - stylelint.json

트러블 슈팅 기록

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
3. no-descending-specificity stylelint가 계속 잡힌다면?결론은 해당 rule을 끄도록 override 하라는 것이다. https://github.com/stylelint/stylelint/issues/4271
4. 아직 해결 못한 save시 auto fix 관련 이슈
   현재는 cmd+s로 저장 시, stylelint가 바로 적용되지 않는다. script 실행을 해야하는데, vscode의 stylelint 익스텐션을 설치하고 settings.json을 수정하면 된다고 한다.

참고

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

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