PostCSS

PostCSS는 일상적인 CSS 동작을 자동화하기 위해 자바스크립트 기반 플러그인을 사용하는 소프트웨어 개발 도구이다.First article about PostCSS in Tuts+ course 이 도구는 위키백과,Adding PostCSS commit in Wikipedia repoWikimedia Stylelint Config 페이스북,Improving CSS quality at Facebook and beyond 깃허브의 코드를 개발하기 위해 사용되어 왔다.PostCSS settings GitHub build toolPrimer Stylelint Config PostCSS는 npm 사용자들 간에 가장 선호되는 CSS 도구이다.CSS preprocessors downloads from npm Evil Martians의 프론트엔드 작업에서 아이디어를 가져와 Andrey Sitnik에 의해 설계되었다.Evil Martians commit in PostCSS repo

 동작 원리 
 구조 
섬네일|오른쪽|PostCSS 워크플로

Sass와 Less와 달리 PostCSS는 CSS 컴파일 틀 언어가 아닌 CSS 도구 개발을 위한 프레임워크이다.What is PostCSS discussion 그러나 Sass와 LESS와 같은 틀 언어를 개발하기 위해 사용할 수 있다.PostCSS Deep Dive: Preprocessing with “PreCSS”

PostCSS 코어는 다음으로 구성된다:Andrey Sitnik - PostCSS: The Future After Sass and LESS

 CSS 파서: CSS 코드의 줄을 위한 객체 트리(AST)를 생성한다.
 클래스의 집합: 트리를 구성한다.
 CSS 생성기: 객체 트리를 위한 CSS 줄을 생성한다.
 코드 맵 생성기: CSS 변경을 위해 사용된다.

유용한 모든 기능은 플러그인을 통해 사용할 수 있다. 이 플러그인들은 객체 트리와 함께 동작하는 작은 프로그램들이다. 코어가 CSS 문자열을 객체 트리로 변환한 뒤 플러그인은 이 트리를 분석하고 변경한다. 이 때 PostCSS 코어는 플러그인 변경 트리를 위한 새로운 CSS 문자열을 생성한다.

 사용법 
PostCSS와 플러그인 모두 자바스크립트로 작성되어 있으며 npm을 통해 배포된다.

PostCSS는 저급 자바스크립트 조작을 위한 API를 제공한다:

// Load the core and plugins from npm
const postcss = require('postcss')
const autoprefixer = require('autoprefixer')
const precss = require('precss')

// Indicate the plugins to use
const processor = postcss([autoprefixer, precss])

// Indicate the CSS code and the names of the input/output file
processor.process('a {}', { from: './app.css', to: './app.build.css' })
  // Use Promise API in case there are asynchronous plugins
  .then(result => {
    // Get the post-processed CSS code displayed
    console.log(result.css)
    // Get the warning messages displayed
    for ( let message of result.warnings() ) {
      console.warn(message.toString())
    }
  })

 각주 

 외부 링크 


 Plugin list

분류:CSS
분류:구문 분석
분류:자바스크립트로 작성된 자유 소프트웨어
분류:MIT 라이선스 소프트웨어
분류:자유 컴파일러와 인터프리터