PostCSS

PostCSS

현자의 돌, PostCSS 로고
개발자	Andrey Sitnik, Ben Briggs, Bogdan Chadkin
발표일	2013년 11월 4일(2013-11-04)
안정화 버전	8.5.3  / 2025년 2월 19일(2025년 2월 19일)
저장소	github.com/postcss/postcss
프로그래밍 언어	자바스크립트
운영 체제	크로스 플랫폼
언어	영어
종류	CSS 개발 도구
라이선스	MIT 허가서
상태	개발 중
웹사이트	postcss.org

PostCSS는 일상적인 CSS 동작을 자동화하기 위해 자바스크립트 기반 플러그인을 사용하는 소프트웨어 개발 도구이다. 이 도구는 위키백과, 페이스북, 깃허브의 코드를 개발하기 위해 사용되어 왔다. PostCSS는 npm 사용자들 간에 가장 선호되는 CSS 도구이다. Evil Martians의 프론트엔드 작업에서 아이디어를 가져와 Andrey Sitnik에 의해 설계되었다.

동작 원리

구조

PostCSS 워크플로

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

PostCSS 코어는 다음으로 구성된다:

• 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())
    }
  })

외부 링크

• PostCSS - 공식 웹사이트
• (영어) postcss - 깃허브
• Plugin list