PostCSS에 대해 알아보자 (PostCSS란?)

 

https://postcss.org/

PostCSS - a tool for transforming CSS with JavaScript

 

서론

웹팩의 로더에 대해 공부하던 중에 postcss-loader 라는 것을 보았다.

Sass가 css의 전처리기(css pre-processor)라는 것은 알고 있었기에 postcss는 후처리기? 처럼 동작하지 않을까 예상해보았다.

 

PostCSS is a tool for transforming styles with JS plugins.

 

`PostCSS는 JS 플러그인을 통해 스타일을 변형하는 도구이다.`

 

 

PostCSS 공식문서에서는 위와 같이 말하고 있다.

 

 

자바스크립트의 플러그인을 기반으로 동작하는 것 하나는 확실히 알 수 있다.

나는 어떤 플러그인이 존재하고 자주 쓰이는 것은 무엇인가 궁금했다.

 

CRA(create-react-app) 에서도 postcss를 사용한다기에 이를 뜯어보며 어떤 플러그인이 사용되는지 확인해보기로 했다.

전처리기와 비교되는 특징은 무엇인지도 같이 알아보자.

 

---

 

Ejecting CRA

// package.json in CRA
"postcss-flexbugs-fixes": "4.2.1",
"postcss-loader": "3.0.0",
"postcss-normalize": "8.0.1",
"postcss-preset-env": "6.7.0",

CRA를 eject 한 이후에 패키지 정보를 살펴보면 위와 같은 postcss 관련 플러그인들이 설치되어있다.

뭐가 있는지 하나씩 알아보자.

 

 

---

https://www.postcss.parts/

postcss.parts

위의 링크에서 플러그인에 대한 정보를 검색할 수 있다.

 

---

flexbug-fixes

https://github.com/philipwalton/flexbugs/blob/master/README.md#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored

GitHub - philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.

IE 환경에서 css flexbox의 버그가 존재하는 모양이다.

flex의 축약형을 사용할 때 문제가 발생하는 듯하다.

 

이런 버그가 발생할 곳을 찾아서 수정해주는 플러그인이다.

어딜 가도 IE가 말썽이다.

 

---

normalize

정의된 browerlist에 따라 normalize.css 를 부분적으로 적용시켜주는 플러그인이다.

브라우저마다 기본 스타일 css가 조금씩 차이가 있다. 이를 개발 초기에 통일성 있게 세팅하는 방법은 크게 두 가지가 있다.

 

1. normalize.css
2. reset.css

우선 reset.css 의 경우 기본 스타일링을 초기화하는 방식이다.

각 태그 별로 유용한 스타일도 모두 지워진다. 

ex) p태그가 기본적으로 가지고 있는 상하 마진, h1/h2/h3 폰트 강조효과 등

반면 normalize.css 의 경우 기본 스타일링에 대한 오염을 최소화하며 브라우저 간 스타일의 차이를 최소화하는 방식을 추구한다.

크로스브라우징 면에서 유용하고 외국에서는 많이 사용하는 방식이라고 한다. (우리나라는 아직? 은 reset.css를 선호한다고 함.)

 

아무튼 normalize 플러그인은 package.json 에 정의된 browserlist 를 기반으로 부분적으로 필요한 normalize.css를 적용시켜주는 플러그인이다.

 

---

preset-env

모던 CSS 문법을 대부분의 브라우저가 이해할 수 있도록 변환해주는 플러그인이다.

CSS의 Babel이라고 생각하면 될 것 같다. 프리셋의 이름도 같다.. 

 

@custom-media --viewport-medium (width <= 50rem);
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:root {
  --mainColor: #12345678;
}

body {
  color: var(--mainColor);
  font-family: system-ui;
  overflow-wrap: break-word;
}

:--heading {
  background-image: image-set(url(img/heading.png) 1x, url(img/heading@2x.png) 2x);

  @media (--viewport-medium) {
    margin-block: 0;
  }
}

a {
  color: rgb(0 0 100% / 90%);

  &:hover {
    color: rebeccapurple;
  }
}

위와 같은 모던CSS 문법을 대부분의 브라우저가 이해할 수 있도록 변환해준다는 것이다.

 

CRA 에서는 postcss-loader의 설정에 다음과 같이 선언하고 있다.

 

`postcss-loader` 를 통해 resolve한다.

// webpack.config.js
{
  loader: require.resolve('postcss-loader'),
  options: {
    ident: 'postcss',
    plugins: () => [
      require('postcss-flexbugs-fixes'),
      require('postcss-preset-env')({
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
      }),
      postcssNormalize(),
    ],
    sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
  },
},

INPUT => OUTPUT

 

왼쪽과 같이 css를 입력하면 오른쪽과 같은 출력을 해준다.

크로스브라우징을 위해 prefix(접두사)를 추가해주는 것이다.

브라우저에 맞게 webkit, ms 등의 접두사가 붙는 것을 확인할 수 있다.

 

이는 여기에서 직접 체험해볼 수 있다.

 

---

플러그인들

이 외에도 200개 이상의 플러그인이 존재한다고 한다.

---

필요성에 대한 의문

간단하게 PostCSS가 어떤 기능을 제공하는지 알아보았다.

하지만 Sass 같은 전처리기에 비해 확실한 이점이 있는가? 에 대한 의문이 들었다.

 

Sass가 제공하는 문법을 통해 모던CSS의 문법을 어느 정도 커버할 수 있다고 생각했다.

 

Sass로 충분한 거 아닐까? 

라는 생각을 하고 있던 찰나... 

 

https://www.julian.io/articles/postcss.html

Some things you may think about PostCSS... and you might be wrong

postcss 공식문서에 위와 같은 아티클이 있었다.

 

1. 너는 이게 전처리기의 대체제라고 생각할 거야.
2. 현재 워크플로우에 추가하기 어려울 것이라고 생각할 거야.
3. 이미 autoprefixer을 사용하고 있을걸?
4. 너는 이게 필요 없다고 생각할 거야.
5. 쓰면 분명 마음에 들 거야.

첫 단락에는 위와 같이 너는 이렇게 생각할 거야~~ 라며 5가지를 제시하는데

나를 꿰뚫어 본 듯했다.... 

 

 

아티클의 내용을 짧게 요약해보겠다.

 

이 아티클의 필자는

1. Sass와 같은 전처리기와 postcss는 엄연히 다르다.
2. 웹팩 로더(+ etc.)를 통해 쉽게 추가할 수 있다.
3. CRA에서도 사용 중이 듯이 이미 많은 곳에서 autoprefixer가 사용되고 있다.
4. styleLint,  autoprefixer, cssNext 등 다양한 기능을 제공한다.

위의 내용을 전달하고 싶은 것 같다.

 

네가 생각하는 것보다 많은 기능들이 존재하고, postcss 만이 제공하는 기능들이 있다!

 

라고 강조하고 있다.

 

 

확실히 매력적인 부분이 있겠다고 느껴졌다.

Stylelint의 경우 css의 컨벤션을 통일할 수 있으며 에러를 방지하는 등 강력한 기능을 제공한다고 알고 있다.

ESLint를 굉장히 선호하는 사람으로서 관심이 생겼다!

 

다음에는 Stylelint를 적용해보는 포스팅을 작성해보지 않을까 싶다.