{{위키데이터 속성 추적}}
{{소프트웨어 정보
| name                   = PostCSS
| logo                   = PostCSS Logo.svg
| logo alt               = 현자의 돌, PostCSS 로고
| logo caption           =
| author                 = 
| developer              = Andrey Sitnik, Ben Briggs, Bogdan Chadkin<ref>[https://www.npmjs.com/package/postcss/access Who can release PostCSS to npm]</ref>
| released               = {{시작 날짜와 나이|2013|11|04}}
| discontinued           =
| ver layout             =
| latest release version = {{wikidata|property|edit|reference|P348}}
| latest release date    = {{시작 날짜와 나이|{{wikidata|qualifier|P348|P577}}}}
| status                 = 개발 중
| programming language   = [[자바스크립트]]
| operating system       = [[크로스 플랫폼]]
| platform               =
| size                   = 
| language               = 영어
| genre                  = CSS 개발 도구
| license                = [[MIT 허가서]]<ref>[https://github.com/postcss/postcss/blob/master/LICENSE License in PostCSS repo]</ref>
| website                = [http://postcss.org postcss.org]
| repo                   = [https://github.com/postcss/postcss github.com/postcss/postcss]
}}

'''PostCSS'''는 일상적인 [[종속형 시트|CSS]] 동작을 자동화하기 위해 [[자바스크립트]] 기반 [[플러그인]]을 사용하는 [[프로그래밍 도구|소프트웨어 개발 도구]]이다.<ref>[http://webdesign.tutsplus.com/tutorials/postcss-deep-dive-what-you-need-to-know--cms-24535 First article about PostCSS in Tuts+ course]</ref> 이 도구는 [[위키백과]],<ref name="postcss-wiki">[https://github.com/wikimedia/portals/commit/998d7ce74c1f68397a52434ce9b85064de7d0008 Adding PostCSS commit in Wikipedia repo]</ref><ref name="stylelint-wiki">[https://github.com/wikimedia/stylelint-config-wikimedia Wikimedia Stylelint Config]</ref> [[페이스북]],<ref name="stylelint-fb">[https://code.facebook.com/posts/879890885467584/improving-css-quality-at-facebook-and-beyond/ Improving CSS quality at Facebook and beyond]</ref> [[깃허브]]의 코드를 개발하기 위해 사용되어 왔다.<ref>[https://archive.today/20160823060733/https://github.com/primer/primer/blob/master/.postcss.json PostCSS settings GitHub build tool]</ref><ref name="stylelint-gh">[https://github.com/primer/stylelint-config-primer Primer Stylelint Config]</ref> PostCSS는 [[Npm (소프트웨어)|npm]] 사용자들 간에 가장 선호되는 CSS 도구이다.<ref>[http://www.npmtrends.com/postcss-vs-less-vs-node-sass-vs-stylus CSS preprocessors downloads from npm]</ref> Evil Martians의 프론트엔드 작업에서 아이디어를 가져와 Andrey Sitnik에 의해 설계되었다.<ref>[https://github.com/postcss/postcss/commit/513f9c1b46a7085ac215e4de9bac5c617d5b2f26 Evil Martians commit in PostCSS repo]</ref>

== 동작 원리 ==

=== 구조 ===

[[파일:PostCSS scheme.svg|섬네일|오른쪽|PostCSS 워크플로]]

[[Sass (스타일시트 언어)|Sass]]와 [[Less]]와 달리 PostCSS는 CSS 컴파일 틀 언어가 아닌 CSS 도구 개발을 위한 [[소프트웨어 프레임워크|프레임워크]]이다.<ref name="why-postcss">[https://github.com/postcss/postcss/issues/861 What is PostCSS discussion]</ref> 그러나 Sass와 LESS와 같은 틀 언어를 개발하기 위해 사용할 수 있다.<ref>[http://webdesign.tutsplus.com/tutorials/postcss-deep-dive-preprocessing-with-precss--cms-24583 PostCSS Deep Dive: Preprocessing with “PreCSS”]</ref>

PostCSS 코어는 다음으로 구성된다:<ref name="cssconfus">[https://www.youtube.com/watch?v=1yUFTrAxTzg Andrey Sitnik - PostCSS: The Future After Sass and LESS]</ref>

* '''CSS [[파서]]''': CSS 코드의 줄을 위한 객체 트리([[추상 구문 트리|AST]])를 생성한다.
* '''[[객체 지향 프로그래밍|클래스]]의 집합''': 트리를 구성한다.
* '''CSS 생성기''': 객체 트리를 위한 CSS 줄을 생성한다.
* '''코드 맵 생성기''': CSS 변경을 위해 사용된다.

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

=== 사용법 ===
PostCSS와 플러그인 모두 [[자바스크립트]]로 작성되어 있으며 [[Npm (소프트웨어)|npm]]을 통해 배포된다.

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

<syntaxhighlight lang="js">
// 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())
    }
  })
</syntaxhighlight>

== 각주 ==
{{각주}}

== 외부 링크 ==
* {{공식 웹사이트}}
* {{GitHub|postcss|postcss}}
* [http://postcss.parts/ Plugin list]

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