Import 자동 정렬을 적용해 보셨다면, CSS 속성도 자동 정렬해 보시는 건 어떨까요 ?

(vsc 기준으로 작성된 글입니다)

아무것도 모르던 코린이가 첫 팀 프로젝트에서 import 구문을
저장 (ctrl + s) 한 번에 촤라락 정렬이 되는 것을 보고 '와 대박!'을 외쳤던 일이 생각나네요 ㅎㅎ

---

적용하게 된 계기

데브코스에서 첫 팀 프로젝트를 경험했을 때였습니다.

저희는 공통 컴포넌트 제작 후 Page UI를 개발하였습니다.

아직 로직을 구현하지 않았기에, 중점적으로 코드 리뷰 할 사항들은 CSS 적인 부분들이었습니다.

이때, 아래 사진과 같이 import 구문을 정렬한 것 처럼,
CSS 속성들도 특정 순서들로 정렬하여 작성하였다면, CSS 내용을 조금 더 빨리 이해할 수 있을 것 같았습니다.

이는 곧 팀원들의 리뷰 속도 향상에 도움이 될 것 같다는 생각이었습니다.

...

하지만
음.. 팀 컨벤션에 따라.. display:flex는 맨 위에 오게끔, 바로 아래에는 justify-content 속성이 와야 하고.. 처럼, 정렬 순서를 하나하나 생각하며 코드를 작성하기에는 많이 번거로울 것 같았습니다.

저는 위 사진처럼, 저장 한 번으로 CSS도 자동으로 정렬해 주는 기능이 있으면 좋겠다고 생각했습니다.

또한 데브코스 팀원분들 외에도, 많은 사람들이 이를 쉽게 사용해보실 수 있게끔 설정법을 공유해보고자 합니다.

(참고로, 이 글은 styled-components와 emotion같은 css-in-js를 기준으로 작성하였습니다.)

그런데, 어떻게 이런 css 정렬이 가능한 것일까?

StyleLint 덕분이었습니다 (+ PostCSS)
ESLint가 JS 관련 처리를 담당해 준다면, StyleLint가 CSS 관련 처리를 담당해 주어요.

• ESLint : ECMASCRIPT Linter의 줄임말, 린팅 역할과 포매터 역할을 한다.
  주로 JS 기반 파일에 사용됨.
• Stylelint : ESLint와 마찬가지로 코드 스타일과 오류를 검사하며, 주로 CSS, SCSS, Less, 그리고 CSS-in-JS 기반 파일에 사용됨.

PostCSS는 역할이 무엇인가요 ?
이따 말씀드릴건데, .eslintrc 파일에 코드 넣어서 설정하는 것 처럼 우리는 .stylelintrc 파일을 하나 만들거고, 거기다가 코드를 넣어줘야 해요.
이때 "customSyntax": "postcss-styled-syntax" 라는 속성을 추가하는데, 여기서 PostCSS가 사용됩니다.

PostCSS syntax for template literals CSS-in-JS.
It was built to be used as Stylelint custom syntax or with PostCSS plugins.

라고 하네요.

styled-components와 같은 CSS-in-JS 라이브러리를 사용할 때, 일반 CSS 파일과 다른 특별한 구문 분석이 필요합니다.
때문에 "customSyntax": "postcss-styled-syntax"를 사용합니다.

(아래 사진은 postcss-styled-syntax 미사용 시)

(그리고 아래 사진은 postcss-styled-syntax 사용 시)

---

적용 방법

서론이 길었네요.
이제 정렬 방법에 대해 말씀드려 보겠습니다.

1. npm에서 설치할 패키지들

npm i styled-components
npm i -D @types/styled-components
npm i -D stylelint
npm i -D postcss postcss-styled-syntax 

// 아래는 선택지 입니다.
// 둘 중 본인이 원하는 것을 선택하시면 됩니다.

// 많은 정렬 패키지들 방식 중 하나를 사용하는 방식 입니다.
// 4-1. 라이브러리 적용 방법에서 이어집니다.
npm i -D stylelint-config-recess-order

// css 정렬을 커스텀으로 한땀한땀 작성하기 위해 사용했던 방식입니다.
// 4-2. Custom order 적용 방법에서 이어집니다.
npm i -D stylelint-config-standard stylelint-order 

2. Setting.json (사용자 설정 열기)

( vsc에서 ctrl(cmd) + shift + p 누르시구 setting.json 입력하시면 나오는 네모 클릭하심 됩니다.
아래 코드를 추가해 주세요. )

/* 
	본인 기준 없어도 작동은 되던 애들.
    근데 작동이 잘 안되시면 추가해 보셔요.
*/
"editor.formatOnSave": true,  // 코드 저장 시 설정된 포매터가 작동되게끔
"stylelint.enable": true,

/* 
	반드시 있어야 작동되는 애들.
    아래 설정에 의해, editor.formatOnSave 규칙에 따라
	코드를 저장할 경우 옵션들이 자동으로 수정할 수 있습니다.    
*/
"editor.codeActionsOnSave": {  
	"source.fixAll.eslint": "explicit",  // eslint와 stlyelint 둘 다 실행되게끔
  "source.fixAll.stylelint": "explicit"
},

// 적용시킬 확장자 파일들을 의미합니다.
"stylelint.validate": [
  "css",
  "scss",
  "postcss",
  "typescript",
  "typescriptreact",	// tsx
  "javascript",
  "javascriptreact"	  // jsx
],

3. vsc stylelint extension

저는 요거 설치해서 사용합니다.
(다른건 사용 안해봐서 모르겠는데, 암튼 이런거 설치를 하셔야 자동 저장 기능이 작동합니다.)

4. .stylelintrc

( 저희는 .esintrc 파일과 같은 경로 위치에, 즉 최상단에 .stylelintrc 라는 이름의 파일을 만들어 두었습니다. )
( 파일명 맨 앞에 ' . ' 붙이셔야 합니다~)

4-1. 라이브러리 적용 방법

// .stylelintrc
{
  "extends": ["stylelint-config-recess-order"],  // 정렬에 사용될, 설치한 라이브러리
  "customSyntax": "postcss-styled-syntax"
}

.stylelintrc 파일에 위 코드 입력 후 저장하시면, 이제 여러분들도 css 자동 정렬이 가능 하실거에요.
( 잘 안되시면 댓글 남겨주세요! 열심히 도와드리겠습니당 )

왜 이런 코드를 집어넣는 건가요?

.stylelintrc 파일에서는 자동으로 정렬할 '순서'를 정해야 합니다.
예를 들어
display 속성이 맨 위에 오게끔,
그 다음에는 align-items 속성이 와야하고...
바로 밑에는 justify-content 속성, 다음은..
등등.

그런데 css에는 정말 많은 속성들이 있잖아요? 그걸 일일이 한땀한땀 타이핑해서 순서를 지정하기에는...
조금 번거로울 것 같아요.
ex ) 이 링크를 확인해보시면 굉장히 많은 css 속성들을 보실 수 있어요.

... 정렬 기능 실험을 위해서 css 속성들을 조금 모아봤었는데, 정말 많더라구요 ㅎㅎ

아무튼, 이런 수고로움을 조금 덜어줄 수 있는 방법이 있습니다.
npm에는 본인들의 입맛에 맞게끔 css 속성들 순서를 정렬해놓은 패키지가 있어요.
아까 저희가 npm i 커맨드로 설치한 stylelint-config-recess-order 이 친구도 그 중 하나죠.

음... 전 이 패키지 정렬 순서가 별로인데, 혹시 이거 말고 다른건 없나요?
네, 여러가지 많은데 고것도 이 링크 에서 확인해보실 수 있습니다.

4-2. Custom order 적용 방법

말 그대로 정렬하고자 하는, 정말 필요한 속성들만 골라서 해당 속성들의 순서를 지정할 수 있는 방법입니다.

해당 내용은 아래 링크의 블로그에서 더 자세히 확인하실 수 있습니다.

블로그 링크

사실 import 자동 정렬 관련 글은 정말 많은데, css 자동 정렬 글은 굉장히 적더라구요...
위 블로그 글 보면서 많이 배울 수 있었습니다.
감사합니다 (__)

아아 참 그리고, 이 블로그1, 블로그2 글도 도움이 많이 되었습니다. 감사합니다!

---

적용 시 변화

위 사진처럼, 기존의 작성했던 css 코드에 붉은 줄이 생기는 것을 볼 수 있습니다!

여기서 저장을 하면

위와 같이 붉은 줄은 사라지고, 설정했던 규칙에 맞게끔 css 속성들이 정렬되는 것을 볼 수 있습니다.

---

간단한 트러블 슈팅

음.. 가장 크게 어려웠던 점은, 자료가 많이 부족해서 하나하나 찾아봐야 했다는 것?

그리고 vsc 설정이 어디에선가 충돌이 나서? 적용이 안되었던 부분도 한 몫 했던 것 같습니다.
실제로 3차 팀과의 프로젝트에서 vsc가 고장나서 타입스크립트가 전혀 작동을 하지 않던... 문제가 있었습니다.
(TS 문제도 vsc를 싹 다 밀고 다시 설치하니까 되더라구요.. 이것도 참, 별 짓을 다해봤었는데)

마지막으로

"stylelint.validate": [
    "postcss",
    "typescript",
    "typescriptreact",
    "js",
    "jsx",
    "tsx"
],

위와 같이 react를 사용하는 환경이라면 jsx 파일을(혹은 tsx) 만들어 사용하실텐데, 이걸 어떻게 선언해야하는지 모르겠더라구요.

"stylelint.validate": [
  "css",
  "scss",
  "postcss",
  "typescript",
  "typescriptreact",
  "javascript",
  "javascriptreact"
]

처럼 "typescriptreact", "javascriptreact" 로 수정해주니 해결되었습니다.

---

마치며

요기까지 간?단하게 css 자동 정렬 기능을 적용시키는 법을 적어보았습니다.

(간?단)

사실 CSS 그거 뭐 정렬 좀 한다고 얼마나 도움 되겠냐, 그 시간에 로직이나 한 줄 더 수정해라...라고 하실 수 있어요.
맞는 말씀입니다. 사실 크게 중요한 부분은 아니지요.

하지만 이런 사소한 부분도 있으면 좋겠다고 말씀 주신 팀원분이 계셨으며, 이를 챙김으로써 팀원들의 더 나은 PR 이해, 나아가 프로젝트 진행 속도에 조금이나마 도움이 된다면 저는 몹시 기쁠 것 같아요 ㅎㅎ

아직 많이 부족한 제가 팀원들에게 작게나마 도움이 된 것 같아서요.
뛰어난 팀원들 속에서 제가 뭘 해서 도움이 될 수 있을까를 계속 고민했고, 모두가 잘 모르던 부분을 메꿔주었기 때문입니다.