PostCSS
November 29, 2021
PostCSS란?
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
PostCSS는 자바스크립트로 작성된 플러그인들을 사용하여 CSS를 변환시켜줌으로써 즉, 여러 가지 기능을 제공한다. lint를 통해 CSS 코드 스타일을 제한하거나, Sass처럼 mixin과 variable을 지원하고, 아직 지원하지 않는 미래의 CSS 문법까지 사용할 수 있게 해준다.
PostCSS로 무엇을 할 수 있는가?
이는 질문이 잘못되었다. PostCSS 플러그인으로 무엇을 할 수 있는가? 라고 질문해야 옳다. PostCSS 자체는 아무 일도 하지 않는다. 다만 다양한 플러그인과, 플러그인을 추가할 수 있는 환경을 제공할 뿐이다. 그러니까 PostCSS로 무엇을 할 수 있는지 알고 싶다면, 질문을 다음과 같이 바꿔보자.
PostCSS 플러그인에는 어떤 것들이 있는가?
Plugins
PostCSS 플러그인 리스트에는 굉장히 많은 것들이 있다.
PostCSS 공식 홈페이지에서 소개하는 JS 플러그인으로는 다음과 같은 것들이 있다.
1. Increase code readability, AutoPrefixer
일단 prefix 자체가 왜 존재하는지, 왜 사용해야 하는지부터 알아보자.
벤더 프리픽스는 브라우저마다 따로 놀던 CSS3의 속성을 각각의 브라우저들이 인식할 수 있게 해주기 위해서 만들어졌다.
CSS 표준안으로 확정되지 않았거나 특정 브라우저에서만 지원되는 CSS 속성을 사용하고싶을 때, 벤더 프리픽스를 사용하면 그 기능이 포함되어 있지 않은 브라우저에서도 사용할 수 있게 해준다.
그러나 웹 브라우저 시장의 경쟁이 구글 크롬 중심으로 정리가 되고, 주요 웹 브라우저들이 최신 CSS 표준을 빠르게 지원하면서 벤더 프리픽스는 점차 사용되지 않는 추세이며, 벤더 프리픽스를 사용할 필요성도 점차 줄어들고 있다. 하지만 CSS는 HTML과 달리 아직 웹 표준이 정해지지 않았고, 모든 브라우저가 같은 방식으로 지원하는 것이 아니기 때문에 우리는 CSS를 모든 브라우저에서 원활히 사용하기 위해 아직 벤더 프리픽스에 대해 알고 있어야 할 필요가 있다.
표준 속성의 적용을 우선해야 하므로, 벤더 프리픽스가 있는 속성은 표준 속성 앞쪽에 표시하는 것이 원칙이다.
벤더 프리픽스가 주로 사용되는 속성은 변형(Transform), 변환(Transition), 애니메이션(Animation), 그라데이션(Gradient) 등 사용 빈도가 낮은 속성들이다. 이 속성들은 속성 값 자체가 복잡하기 때문에 벤더 프리픽스를 자동으로 추가해주는 서비스를 이용해 사용하는 것을 추천한다.
2. Use tomorrow’s CSS today!, PostCSS Preset Env
미래의 CSS 문법을 사용할 수 있게 해주는 plugin이다.
3. The end of global CSS, CSS Modules
이건 Next.js 홈페이지에서도 보고 놀랐던 거다.
Keyplus 프로젝트를 진행할 때 각각의 컴포넌트 파일(jsx)마다 CSS 파일(scss)을 따로 지정해서 줬는데 클래스 이름이 겹치면 다른 컴포넌트 파일에도 적용됐었다. 다른 프론트엔드 분과 나눠서 작업을 하고, 클래스 방법론을 정해서 코딩을 하지는 않았어서 생긴 문제였는데 그때는 리액트가 웹팩을 통해 파일들을 하나로 합치면서 SCSS도 합쳐버려서 그런 거구나.. 해결을 할 수는 있을 텐데.. 나중에 알아봐야지 하고 넘어 갔었는데 그때 바로 이 CSS Modules를 사용했으면 됐을 것 같다는 생각이 들었다.
모듈화를 사용하면 동일한 className 사용 시 오버라이팅을 피하기 위해 BEM과 같은 복잡한 CSS 방법론(클래스 네이밍 규칙)을 지키지 않아도 된다.
velopert - CSS Module, 물론 React에선 Emotion이나 styled-components와 같은 CSS in JS 기술을 쓰는 것이 더 편할 수도 있다.
4. Avoid errors in your CSS, stylelint
stylelint는 JavaScript의 문법 에러를 잡아주고 코딩 스타일을 제한해주는 ESLint의 CSS 버전이라고 보면 된다.
Sass와의 차이
2021 Frontend Developer Roadmap에 보면
PostCSS와 Sass 모두 CSS 전처리기(preprocessor)인 것을 확인할 수 있다.
그렇다면 Sass와 PostCSS는 어떤 점이 다를까?
Sass는 내부에서 제공하는 문법이 정해져 있고 한정적이지만 PostCSS는 플러그인이 굉장히 다양하다. 이 때문에 PostCSS 사용에 대한 선호도가 올라가고 있으며, 대표적인 예로 CRA을 사용했을 때 기본적으로 Post CSS가 자동적으로 설치되어 있음을 확인할 수 있다.
그리고 PostCSS는 앞에서도 봤듯이 자신을 이렇게 소개하고 있다.
PostCSS는 자바스크립트 기반의 플러그인을 사용하여 CSS 기능을 자동화하는 소프트웨어 개발 도구입니다.
Sass나 less는 “CSS로 변환되는 스타일 시트 언어”라고 표현하는 것과 확연한 차이점이 있다.
그렇다. PostCSS는 언어가 아니다. 도구일 뿐이다. 비유하자면, CSS 전용 Babel이라고 할 수 있다.
Webpack + PostCSS
웹팩에 postcss-loader를 설정할 수 있다.
[Webpack] postcss-loader을 참고하면 된다.
사이트에도 나와 있듯이 postcss-preset-env가 이미 autoprefixer를 포함하고 있으므로 postcss-preset-env를 사용한다면 따로 추가해줄 필요가 없다.
추가적으로 postcss-scss는 scss를 css로 컴파일 해주지 않는다. Sass를 사용할 것이라면 sass-loader를 거친 후 나온 결과에 postcss-loader를 사용하는 것이 좋다.
