Stylelint로 스타일 속성을 관리해보자! (@stylelint/postcss-css-in-js", and use the "customSyntax" option, Unexpected unknown function "${" function-no-unknown, stylelint 14버전 css-in-js)

Stylelint로 스타일을 관리해보자!

stylelint란?

style의 규칙을 정해주는 것으로 eslint와 유사하다.

사용 기술 스택
next.js
typescript
styled-components

내가 사용하는 기술은 위와 같다.

styled-components의 공식문서에 stylelint에 대한 사용법이 적혀있다.
현재 스타일린트 버전은 14이다.
styled-components 공식문서에 따르면 버전은 13이라, 따라하면

stylelint에서 @stylelint/postcss-css-in-js", and use the "customSyntax" option에러가 뜰 것이다.

이 에러가 뜨는 이유는?
stylelint가 업데이트되면서 styled-components를 사용하기 위해선 customSyntax가 필요했던 것이다.

그래서 나는 처음에 @stylelint/postcss-css-in-js

설치 이후, customSyntax에 @stylelint/postcss-css-in-js를 써줬지만,

에러는 발생하지 않더라도, stylelint가 작동하지 않았다.

이 문제를 해결하기 위해 아직 검색을 해보았다. open중인 Issue가 있었다.
여기에서 해결법을 찾았고,

	"customSyntax": "@stylelint/postcss-css-in-js",

v14부터는 위의 customSyntax가 추가되어야 했던 것이지만,
추가가 되기 위해선 postcss와 postcss-syntax가 추가되어야했던 것이다.

하지만 css-in-js만 설치를 해서 stylelint가 작동하진 않았고, postcss와 postcss-syntax가 설치되어야한다.
scss 및 styled도 설치하라고 나왔지만, 테스트해보니까 필요가 없었다.
안되는 경우는 scss와 styled도 설치해보면 좋을 것 같다.

stylelint를 적용해보자! (14버전, styled-components)

yarn add -D stylelint 
    stylelint-config-recommended
    stylelint-config-styled-components
    postcss postcss-syntax
    @stylelint/postcss-css-in-js

stylelint - stylelint의 사용을 가능하도록 해준다
stylelint-config-recommended - 오류를 방지하는데 도움이 되는 규칙들
stylelint-config-styled-components - 스타일컴포넌트에서 스타일린트 설정할 수 있도록
postcss postcss-syntax @stylelint/postcss-css-in-js - stylelint14버전의 호환에 맞도록 설치하여준다

설치를 했으면 .stylelintrc 파일을 만들고 아래 코드를 추가하자

// .stylelintrc
{
  "extends": ["stylelint-config-recommended", "stylelint-config-styled-components"],
  "overrides": [
    {
      "files": ["**/*.{ts,tsx}"],
      "customSyntax": "@stylelint/postcss-css-in-js",
      "rules": {
        "color-hex-case": "lower",
        "at-rule-no-unknown": null,
        "font-family-no-missing-generic-family-keyword":null
      }
    }
  ]
}

package.json의 scripts에

{
    ...
    "stylelint": "stylelint './src/**/*.{ts,tsx}'"
    ...
}

위 코드를 추가이후,
yarn stylelint를 하면 실행이 될 것이다.

css의 속성들의 위치들을 수정하고 싶으면

stylelint-config-concentric-order를 설치하고, extends하면 위치 속성에 맞도록 될 것이다.

{
    ...
    "extends": "stylelint-config-concentric-order"
    ...
}

여기에 맞도록 스타일린트가 설정될 것이다.

processor를 추가해야할까 ?

현재 styled-components의 공식문서에서 stylelint에 대한 내용을 찾아보면 processor를 설치하라고 나와있었다.

"processor": "stylelint-processor-styled-components",

설치 이후, processor부분에 추가해주었다.
이후 function에러들도 안터져서 해결이 된 줄 알았으나, css order의 lint error들이 문제가 있어도 나타나지 않았다.
그래서, 해결방안으로 processor을 없애고,
rule에 내가 없애고 싶은 규칙을 추가해주었다. (styled-components에 맞도록)

나는 처음에 Unexpected unknown function "${" function-no-unknown 에러가 떴다.

"function-no-unknown": [true, { "ignoreFunctions": ["/\\${/"] }]

를 추가하여 ${로 시작하는 함수는 Lint규칙을 무시해주는 방안으로 해결하였다.

//.stylelintrc
{
  "extends": ["stylelint-config-recommended", "stylelint-config-styled-components", "stylelint-config-concentric-order"],
  "overrides": [
    {
      "files": ["**/*.{ts,tsx}"],
      "customSyntax": "@stylelint/postcss-css-in-js",
      "rules": {
        "color-hex-case": "lower",
        "unit-case": "lower",
        "at-rule-no-unknown": null,
        "font-family-no-missing-generic-family-keyword":null,
        "function-no-unknown": [true, { "ignoreFunctions": ["/\\${/"] }]
      }
    }
  ]
}

최종 stylelintrc는 위 코드와같다.

스타일린트에 맞도록 고치고 싶을땐 stylelint --fix를 통해 스타일린트에 맞도록 css를 수정하자