PostCSS

🎓 PostCSS?

• A tool for transforming CSS with JavaScript
• 자바스크립트로 CSS 변환을 해주는 도구라고 소개가 되어있다
  (여기서 말하는 자바스크립트는 자바스크립트 플러그인을 의미)
• 결론은 CSS 작성 경험을 향상시켜주는 도구다.(babel 같은..)

✋🏻간단한 예시를 살펴보자!

• 우리는 CSS 작성 시, 비표준 또는 최신 CSS 인 경우 브라우저에서 완전히 호환이 되기전까지 호환성을 위해 접두사를 붙이는걸 기억할거다.

.box-wrap {
 box-sizing: border-box;
 -webkit-box-sizing: border-box;  // chrome, safari prefix
 -moz-box-sizing: border-box;     // firefox
 -o-box-sizing: border-box;       // old opera versions
 -ms-box-sizing: border-box;      // IE, Microsoft Edge
}

• postcss 를 사용하면 이러한 작업을 편리하게 해결해준다
• Autoprefixer 플러그인을 사용하면 자동으로 결과물에 접두사(prefix)를 붙여준다
  (https://github.com/postcss/autoprefixer)
• 원한다면, SASS 처럼 변수 사용도 가능
• https://www.postcss.parts/ 다양한 플러그인들이 제공되고 있음

💼어떻게 사용하지?

• rollup 에서 사용하길 원한다면 rollup-plugin-postcss 플러그인을 사용

npm i -D rollup-plugin-postcss postcss

// rollup.config.js
import postcss from 'rollup-plugin-postcss';
 
export default {
  plugins: [
    postcss({
      plugins: [],
      extract: true,
      modules: true,
    })
  ]
}

postcss({}) // 이런형식으로 사용
plugins : array => PostCSS Plugins 정의
extract : boolean => js 파일이 생성된 동일한 위치에 css 파일을 추출
modules : boolean | object => CSS 모듈을 활성화 및 postcss-modules에 대한 옵션을 설정

• 참고로 플러그인들을 추가할때, 순서가 중요
• rollup.config.js 에 저런형식으로 작성을 하여도 좋고, postcss.config.js 파일을 작성하여 사용도 가능하다. (또는 postcss-cli 를 설치하여 사용가능하다)

// postcss.config.js
// 프로젝트 root 경로에 생성하여 사용이 가능
// 참조 : https://github.com/postcss/postcss-cli

module.exports = {
  parser: 'sugarss',
  plugins: [
    require('postcss-import')({ ...options }),
    require('postcss-url')({ url: 'copy', useHash: true })
  ]
}

• 웹팩에서 사용하길 원한다면, postcss-loader 를 사용

npm i -D postcss-loader postcss