기존에 CSS-in-JS로 emotion을 사용하고 있었는데요.
styled-components와 달리 emotion에서는 stylelint를 설정하는 방법이 따로 없었습니다.
공식문서를 봐도 stylelint와 관련된 내용을 찾아보기 어려웠습니다. 🤦♂️
몇 일동안 정말 다양한 문서를 봤던 것 같습니다...
모든 포스팅이 그렇듯 시간이 지남에 따라 버전에 대한 문제도 있었고, 더 이상 지원하지 않는 플러그인을 가지고 적용하는 방법 등 제대로 적용할 수 있는 방법을 찾지 못했습니다.
그래서 styled-components로 옮겨가야 되겠다라고 생각하고 있었죠.. 🚚
저는 emotion에서도 주로 styled 키워드를 자주 사용하는데요.
그래서 styled-components의 stylelint 설정 방식을 emotion에 그대로 적용해보았습니다!
다행히..! emotion의 styled 키워드에서는 잘 작동을 했습니다!! 🙌
저와 같이 emotion과 stylelint, css 속성 정렬을 같이 해보고 싶으신 분들은 아래의 포스팅을 봐주시면 됩니다!
Emotion 설치
React
$ yarn add @emotion/react @emotion/styledReact Native
$ yarn add @emotion/react @emotion/nativeStyleLint 설치
$ yarn add --dev stylelint stylelint-config-standard stylelint-order postcss-styled-syntaxstylelint:stylelint를 사용하기 위한 기본적인 패키지stylelint-config-standard:stylelint에서 표준으로 제공하는 규칙에 대한 패키지stylelint-order:CSS속성에 대한 그룹 및 순서를 작성할 수 있는 패키지postcss-styled-syntax:styled로 작성된CSS속성들을 파싱해주는 패키지
stylelint 15버전 이상을 기준으로 작성했습니다.
styled-components의 stylelint 설정 방식을 그대로 가져와서 emotion에 적용했습니다.
그래서 emotion에서 사용하는 The css Props와 같은 형식에는 적용이 되지 않을수도 있습니다.
.stylelintrc.json 파일 작성
{
"extends": ["stylelint-config-standard"],
"plugins": ["stylelint-order"],
"customSyntax": "postcss-styled-syntax",
"rules": {
// css 속성 작성 시 empty line 관련 설정
"declaration-empty-line-before": [
"always",
{
"ignore": [
"first-nested",
"after-comment",
"after-declaration",
"inside-single-line-block"
]
}
],
"order/order": ["custom-properties", "declarations"],
// css 속성 그룹 및 순서 설정
"order/properties-order": [
{
// 그룹 이름 설정
"groupName": "Layout",
// 그룹 내부 emptyline 사용 여부
"noEmptyLineBetween": true,
// 그룹 css 속성 멤버
"properties": [
"display",
"visibility",
"overflow",
"float",
"clear",
"position",
"top",
"right",
"bottom",
"left",
"z-index"
]
},
{
"groupName": "Box",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"width",
"height",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"border"
]
},
{
"groupName": "Background",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["background-color"]
},
{
"groupName": "Font",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": [
"color",
"font-style",
"font-weight",
"font-size",
"line-height",
"letter-spacing",
"text-align",
"text-indent",
"vertical-align",
"white-space"
]
},
{
"groupName": "Animation",
"emptyLineBefore": "always",
"noEmptyLineBetween": true,
"properties": ["animation"]
}
]
}
}
stylelint-order플러그인에 대한 내용을github을 통해서 추가적으로 찾아보시는 것을 추천드립니다.페이지에 룰에 대한 자세한 설명들이 포함되어 있습니다.
StyleLint script 작성
// package.json
{
"scripts": {
"lint:styled": "stylelint './src/**/*.styles.ts' --fix",
}
}
Lint 검사
npm run lint:styled앞으로 Lint 검사를
Husky와 같이git hook과 연계해서 사용하거나
vscode의 경우에는stylelint플러그인을 잘 지원해주는 것으로 알고 있습니다.
Intelij의 경우에는File Watcher플러그인을 별도로 설치해서 사용해야 합니다.
적용 예시
// components/CustomText/CustomText.styles.ts
import styled from '@emotion/native';
export const CustomText = styled.Text`
display: flex;
width: 200px;
margin: 10px;
padding: 10px;
border-radius: 100%;
background-color: black;
color: #e9ecef;
font-weight: bold;
font-size: 14px;
animation: ease;`;현재 느낀 단점은 .stylelintrc.json 파일 내부에 작성하지 않은 css의 속성의 경우에는 어떠한 룰도 적용되지 않는 점입니다.
플러그인에서 어느정도 그룹핑을 제공하면 좋을 것 같습니다.
stylelint-semantic-groups,stylelint-config-rational-order,stylelint-config-idiomatic-order등의 플러그인을 사용하면 기본적으로 제공하는 그룹핑이 있는 것 같습니다.
정리
emotion + stylelint를 적용하기 위해서 정말 많은 자료를 찾아보고 시간을 사용했던 것 같습니다.. 🤯
아직 stylelint-config-standard에 대한 자세한 룰을 적용하지 않았고, 정렬에 대한 자세한 룰도 적용하지 않았습니다.
본인이 사용하시고 싶은 CSS 컨벤션이 있다면, 이번 기회를 통해서 시스템화 하는 것도 좋은 기회라고 생각합니다!
