Skip to content

Qvil Blog

Github

[CSS] No Extra Semicolons

— css, emotion — 1 min read

문제: 아래 문법 중 어느게 맞을까요?

1번

1import emotionReset from "emotion-reset";
2import { css } from "@emotion/react";
3
4const style = css`
5  ${emotionReset};
6`;

2번

1import emotionReset from "emotion-reset";
2import { css } from "@emotion/react";
3
4const style = css`
5  ${emotionReset}
6`;

정답: 둘 다 맞습니다.

css에서 세미콜론을 추가로 찍어도 에러가 발생하지 않습니다.

1import { css } from "@emotion/react";
2
3const style = css`
4  display: none;;
5`;

왜 궁금하죠?

Prettier에서 세미콜론을 안찍어주고 동작에러도 없어서 코드리뷰 과정에서 사람에 따라 세미콜론이 다르게 찍혀서 알게 되었고 궁금해서 찾아봤는데 위와 같은 style에 세미콜론을 찍으면 stylelint의 no-extra-semicolons 룰에서 에러를 발생시킵니다.

왜 헷갈렸을까?

아래와 같이 스타일에 세미콜론 자체가 빠지면 동작에도 에러가 나는데 이것과 헷갈렸던 것이 아닐까 싶습니다.

1import { css } from "@emotion/react";
2
3const style = css`
4  display: none font-size: 10px
5`;

결론

@emotion/css로 만들어진 스타일에는 세미콜론(;)을 추가할 필요 없다.

1import emotionReset from "emotion-reset";
2import { css } from "@emotion/react";
3
4const style = css`
5  ${emotionReset}
6`;

References