PostCSS의 구조

본고에서'PostCSS'라는 단어의 작용 범위는GiitHub 창고에서 PostCSS 호스트 코드가 진행하는 범위를 가리킨다.

PostCSS의AST

PostCSS 자체는 CSS의 서버일 뿐 그렇게 큰 코드 기반은 아니다.PostCSS는 CSS를 수신하는 소스 코드를 입력하여 해석하고 독자적인AST(Abstract Syntax Tree, 추상 문법 나무)를 생성합니다.
실제 아스트가 어떤지 보자.
우선 다음 내용으로 파일명input.css을 작성한다.

.qiita {
  color: #fff;
  background-color: #4ea30a;
}

그리고 input.css 코드를 지우고 표준 출력AST를 출력합니다.

// parse.js
const fs = require('fs')
const util = require('util')
const postcss = require('postcss')

const css = fs.readFileSync('./input.css')

const ast = postcss.parse(css)
console.log(util.inspect(ast, false, null))

실행:

$ node parse.js
Root {
  raws: { semicolon: false, after: '\n' },
  type: 'root',
  nodes: 
   [ Rule {
       raws: { before: '', between: ' ', semicolon: true, after: '\n' },
       type: 'rule',
       nodes: 
        [ Declaration {
            raws: { before: '\n  ', between: ': ' },
            type: 'decl',
            parent: [Circular],
            source: 
             { start: { line: 2, column: 3 },
               input: 
                Input {
                  css: '.qiita {\n  color: #fff;\n  background-color: #4ea30a;\n}\n',
                  id: '<input css 1>' },
               end: { line: 2, column: 14 } },
            prop: 'color',
            value: '#fff' },
          Declaration {
            raws: { before: '\n  ', between: ': ' },
            type: 'decl',
            parent: [Circular],
            source: 
             { start: { line: 3, column: 3 },
               input: 
                Input {
                  css: '.qiita {\n  color: #fff;\n  background-color: #4ea30a;\n}\n',
                  id: '<input css 1>' },
               end: { line: 3, column: 28 } },
            prop: 'background-color',
            value: '#4ea30a' } ],
       parent: [Circular],
       source: 
        { start: { line: 1, column: 1 },
          input: 
           Input {
             css: '.qiita {\n  color: #fff;\n  background-color: #4ea30a;\n}\n',
             id: '<input css 1>' },
          end: { line: 4, column: 1 } },
       selector: '.qiita' } ],
  source: 
   { input: 
      Input {
        css: '.qiita {\n  color: #fff;\n  background-color: #4ea30a;\n}\n',
        id: '<input css 1>' },
     start: { line: 1, column: 1 } } }

AST를 들으면 어려울 수 있지만 JavaScript의 대상일 뿐입니다.이번 구조는 우선Root 노드가 있고, 아래에는 1개Rule 노드가 있으며, 아래에는 2개Declaration 노드(속성선언)가 있다.각 노드source의 속성은 소스 맵입니다.

PostCSS 프로세스

PostCSS는 위에서 설명한 대로 CSS 코드를 적용하여 AST를 생성합니다.그런 다음 AST를 CSS 문자열로 변환하면 됩니다.PostCSS 자체는 AST 변환을 수행하지 않습니다.즉, PostCSS 단일체는 CSS를 변환하지 않습니다.

실제 변환 CSS 처리는 PostCSS 플러그인에 의해 수행됩니다.PostCSS에서 여러 플러그인을 조합하여 읽는 순서대로 실행할 수 있습니다.플러그인은 AST를 받아들여 임의로 변환된 AST로 돌아가는 프로그램을 말한다.
또한 PostCSS는 AST를 쉽게 조작할 수 있는 편리한 API를 제공합니다.
내일 이 API를 사용하여AST의 전환 방법을 설명하겠습니다.