[gulp] PostCSS - Joohee-Moon/study GitHub Wiki


1.1. PostCSS

Autoprefixer 의 저자로 유명한 러시아 Andrey Sitnik 가 개발하고있는 도구입니다.

공식 저장소 README에는 다음과 같이 적혀 있습니다.

PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

PostCSS 는 CSS 스타일을 변경하기 위한 도구이고, 각종 플러그인에 의해 이루어집니다.

​PostCSS 자체는 CSS 파서 그것에 의해 생성되는 AST (추상 구문 트리, Abstract Syntax Tree) 를 취급하는 API를 제공하고 있는 것에 지나지 않습니다.

​Autoprefixer, mqpacker 또한 PostCSS 플러그인의 일종입니다.


1.2. ​Autoprefixer

autoprefixer({browsers: ['last 2 version']}),

last 2 versions : the last 2 versions for each major browser.

참고 : ​https://github.com/ai/browserslist#queries


1.3. ​​mqpacker

Pack same CSS media query rules into one media query rule.


2. postcss error : promise is not defined

node.js 0.10.xx 버전에서 PostCSS 를 사용할 때 생기는 이슈입니다.

​Node.js 0.10 and the Promise API

If you want to run PostCSS in Node.js 0.10, add the Promise polyfill:

버전 업데이트로 해결이 가능하지만 업데이트를 할 수 없을 경우, 아래와 같이 하면 해결됩니다.

To install :

npm install es6-promise

To use : gulpfile.js 에 구문 추가

require('es6-promise').polyfill();
var postcss = require('postcss');

* 참고

https://www.sitepoint.com/7-postcss-plugins-to-ease-you-into-postcss/