About PostCSS

웹과 앱에서 CSS(Cascading Style Sheets)에 대한 비중은 점점 커져가는 요즘

CSS 전처리기(preprocessor)가 아닌 CSS 후처리기(postprocessor)인 PostCSS에 대해 글을 적어나가고자 한다.

---

전처리기(Pre-processor)와는 무엇이 다른가?

SASS, LESS, Stylus 등의 전처리기는 CSS가 생성되기 전, 각자의 고유한 파일 확장자를 가진다. (*.scss,*.less,*.styl)

그 후 생성된 파일을 컴파일 하여 CSS로 변환시키는 형태로 진행이 된다. 

예) CMD에서 SASS 파일로 CSS로 변환하는 명령어

sass --watch input.scss output.css

 

반면, PostCSS의 Workflow는 다음과 같은 과정을 가진다.

CSS -> Parser -> Plugin -> Stringfier -> New CSS

 

말 그대로 CSS가 생성되기 전에 Processing이 진행 되는지,

생성된 CSS를 Processing 하여 새 CSS로 변환해주는지의 차이다.

장점.

1. npm 으로 다운로드 및 설치가 가능하다.

 - Vue.JS, react.JS 등 web framework 에서 활용이 쉽다.

2. 플러그인 종류가 상당히 많아서 본인이 필요한 부분만 사용이 가능하다. 

 - https://www.postcss.parts/ 에서 확인 할 수있으며 200여개의 플러그인이 npm에 등록되어 있다.

 - 실제로 Wikipedia, Twitter, Alibaba, and JetBrains 등에서 사용중이다.

단점.

1. 플러그인 의존도가 높다.

 - PostCSS는 플러그인을 연결해주는 역할만 수행하기 때문에, 원하는 플러그인이 있을 때 마다 설치해야만 한다. 

 - PostCSS의 공식 git 문서에도 아래와 같이 적혀있다.

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의 소개와 특징, 장,단점에 대하여 간단히 정리해 보았다.