PostCSS

PostCSS

개발자	Andrey Sitnik, Ben Briggs, Bogdan Chadkin^[1]
발표일	2013년 11월 4일(10년 전)(2013-11-04)

안정화 버전	8.4.41^[2] / 2024년 8월 5일(20일 전)(2024년 8월 5일)

저장소	github.com/postcss/postcss
프로그래밍 언어	자바스크립트
운영 체제	크로스 플랫폼
언어	영어
종류	CSS 개발 도구
라이선스	MIT 허가서^[3]
상태	개발 중
웹사이트	postcss.org

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

동작 원리

구조

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

PostCSS 코어는 다음으로 구성된다:^[14]

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