💫stylelint를 사용한 CSS-in-JS 정렬화
stylelint 선택 이유
우테코 '리뷰미'팀(=우테코 레벨3,4 팀프로젝트를 함께하게 된 팀)의 프론트엔트 기술 스택으로 emotion을 사용하게 되었다. 팀프로젝트이다보니 css 속성 정렬을 일관되게 해야한다는 필요성을 느꼈다. css-in-js인 emotion에서 css 속성을 자동 정렬해주는 린트 도구로 stylelint를 선택했다.
stylelint를 통해서 얻고자 하는 것
- 팀원의 css 속성 정렬을 일관되게 하고 싶다.
- css 속성 정렬이 보다 편리하게 자동으로 되었으면 좋겠다.
stylelint 설정
패키지 설치
"@stylelint/postcss-css-in-js": "^0.38.0",
"postcss-syntax": "^0.36.2",
"stylelint": "^16.7.0",
"stylelint-config-clean-order": "^6.1.0",
"stylelint-order": "^6.0.4",css 속성 정렬에 관한 패키지
-
stylelint-config-clean-order
stylelint에서 제공하는 css 속성 순서를 기준으로 css 속성을 정렬해준다. -
stylelint-order
stylelint에서 제공하는 css 속성 가이드라인 외에 개발자가 직접 관리하거나 추가하고 싶은 rule이 있다면 해당 패키지를 설치해야한다.
postcss 관련 패키지
💡postcss 관련 오류가 뜬다면 아래의 패키지들을 설치하고 stylelintrc.json에 관련된 설정을 추가해야한다.
- @stylelint/postcss-css-in-js
js,ts파일내의 css-in-js 스타일을 린트할 수 있도록 지원한다. - postcss-syntax
css,scss,Less,HTML등 여러 포맷의 스타일 시트를 처리하는 PostCSS의 플러그인이다.HTML, Vue, Svelte, JS 파일 등의 인라인 스타일을 파싱하는 기능도 제공합니다. 이로 인해, 스타일 파일뿐만 아니라 웹 컴포넌트 파일이나 스크립트 파일 내의 인라인 스타일도 검사할 수 있다. postcss-syntax가 stylelint가 파일내의 인라인 스타일등의 다양한 파일 형식을 올바르게 파싱하고 검사할 수 있게 도와주는 것 같다.
🤔postcss-lit가 아닌 @stylelint/postcss-css-in-js를 사용한 이유
stylelint 공식문서는 postcss-lit를 설치하라고 소개하고 있다.
그러나 postcss-lit를 이용하면 css 속성이 정렬되지 않았고 현재 업데이트가 중단된 @stylelint/postcss-css-in-js를 사용하면 css 속성이 규칙대로 자동 정렬되었다.
이에 대해서 찾아보니 styleint가 css-in-js 문법을 완벽하게 지원하지 않아서 이를 해결해주는 플러그인이 필요한다. 그런데 postcss-lit는 css파일을 대상으로 다양한 규칙을 제공하지만 css-in-js 문법을 지원하는 플러그인의 역할에는 부족하고 stylelint의 모든 규칙을 적용하는 방식으로 설계되지 않았다는 문제점도 있다.
stylelint가 css-in-js에 적용하기 위한 방법으로 @stylelint/postcss-css-in-js와 stylelint-processor-styled-components 패키지가 있다.
stylelint-processor-styled-components 이 파서문제, 템플릿 리터럴을 사용한 스타일 지정방식에서 문제가 있다. 복잡한 css-in-js구문에서 문제가 발생할 수 있고, 템플릿 리터럴 사용시 스타일 정의가 최대한 간단하게 유지되어야 한다.
@stylelint/postcss-css-in-js 가 업데이트가 중단되었다는 점이 걸리지만 현재 작업중인 코드에서는 문제 없이 작동해서 일단은 사용하기로 했다.
다른 stylelint에서 제공하는 기본 가이드 라인 패키지 설치 안한 이유
stylelint-config-clean-order 외에 stylelint에서 제공하는 기본 가이드 라인 플러그인(ex: stylelint-config-standard처럼 )들은 설치하지 않았다. css 속성 정렬 기능만 있으면 되고 stylint의 기본 가이드라인 중 팀에서 필요없는 룰을 일일히 off하는 것도 번거로운 일이라고 생각했다.
.stylelintrc.json 설정
{
// stlyelint에서 제공하는 css 속성 정렬을 따르도록 함
"extends": ["stylelint-config-clean-order"],
"plugins": ["stylelint-order"],
// css-in-js에서 stylelint를 적용할 수 있도록 설정
"customSyntax": "@stylelint/postcss-css-in-js",
"rules": {
//css 속성 사이의 빈줄이 없도록 함
"declaration-empty-line-before": [
"never",
{
"ignore": ["after-declaration"]
}
]
}
}pacakge.json 에서 stylelint 적용 명령어 추가
emotion을 사용한 스타일 코드를 styles.ts에서 작성하고 있어서 style.ts에 stylelint를 적용하기 위해서 아래의 명령어를 scripts에 추가했다.
"lint:styles": "stylelint \"src/**/styles.ts\" --fix"위의 lint:styles를 사용하면 styles.ts내의 css 속성들이 특정한 규칙으로 정렬된다. 문제는 이 방법은 명령어를 일일이 쳐서 속성들을 정렬해야 하는 번거로움이 따른다. 그래서 코드 저장 시 자동으로 stylelint가 적용될 수 있도록 vscode의 stylelint 확장프로그램을 같이 사용하기로 했다.
vscode stylint 확장 프로그램 사용
- vscode에서 stylint 확장 프로그램을 설치한다.
- ./vscode/setting.json에 아래의 설정을 추가한다.
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"stylelint.validate": [
"css",
"scss",
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
]
}😥stylelint의 한계: emotion css 객체 방식 인식 못함
위의 과정을 다 진행하고 emotion styled, css 리터럴 방식에서 모두 css 속성이 자동 정렬되는 것을 확인했다. 그러나 emotion css를 아래와 같이 객체 형식으로 사용 시, stylint가 css를 인식하지 못하는 문제가 발생했다.
- 문제 코드
const BoxStyle = css{{fontSize:20}}그래서 css를 사용한다면 아래와 같은 리터럴 방식을 사용하기로 했다.
- css 리터럴 예시 코드
const TestStyle = css`
width: 100px;
padding: 10px;
`;
<div
css={css`
width: 100px;
padding: '10px';
`}
>
test
</div>💦마무리
stylelint가 적용되지 않는 문제로 며칠간 애를 먹었다. 기획,디자인,구현까지 0에서 시작하는 팀프로젝트여서 해야 하는 것들이 많은 상황에서 해커톤,데모데이와 팀내의 스프린트 목표도 달성하려 하다 보니 시간에 쫓겼다. 오류나 stylelint를 제대로 들여다보기보다는 gpt나 블로그에서 적힌 방식을 따라 하면서 급급했다. 해당 플러그인의 역할이 뭔지, 언제 필요한지 파악할 시간조차 스스로에게 허락하지 않았었다.
시간적으로 여유로운 주말에 stylelint 적용에 성공한 다른 팀 프론트 크루에게 물어도 보고 (6기 FE 마위 고맙다!👍) 공식문서도 보고 플러그인의 역할과 룰을 따져보면서 우리팀에 필요한 stylelint를 적용하는데 성공했다.
이번 stylelint 적용을 통해서 패키지 설치와 설정 시에 "무엇이 필요한가?", "그게 무슨 역할을 하는가?"를 생각해봐야 한다는 것을 다시금 깨달았다. 또한 패키지 설치 시 터미널창에 보이는 오류를 간과하면 안 된다는 것도 알게 되었다.
🔖참고자료
