PostCSS

Камен мудрости, PostCSS лого
Оригинални аутор(и)	Андреј Ситник, Бен Бригс, Богдан Чедкин[1]
Прво издање	4. новембар 2013; пре 12 година (2013-11-04)
Стабилно издање	6.0.2 / 12. јун 2017; пре 9 година (2017-06-12)[2]
Репозиторијум	github.com/postcss/postcss
Написан у	Јаваскрипт
Платформа	вишеплатформски
Тип	CSS развојни алат
Лиценца	МИТ лиценца[3]
Веб-сајт	postcss.org

PostCSS је софтверски развојни алат за аутоматизацију рутинских CSS операција коришћењем Јаваскрипт плагинова.^[4] Овај алат је коришћен у развоју кода на Википедији,^[5][6] Фејсбуку^[7] и ГитХаб-у.^[8][9] PostCSS је један од најпопуларнијих алата међу npm корисницима. Развио га је Андреј Сатник на основу свог рада на пројекту Зли Марсовци (енгл. Evil Martians).^[10]

За разлику од Sass-a и LESS-a, PostCSS није шаблонски језик за компајлирање CSS-а, већ фрејмворк за развој CSS алата,^[11] иако се може користити за развој шаблонских језика као што су Sass и Less.^[12]

PostCSS се састоји од следећих компоненти:^[13]

• CSS парсер који генерише АСТ објектно стабло ѕа сваку линију CSS кода;
• Скуп класа које чине стабло;
• CSS генератор који генерише линију CSS кода за објектно стабло;
• Генератор мапа кода за бележење промена у CSS-у.

Све ове корисне функционалности су доступне у виду плагинова. Плагинови су мањи програми који манипулишу објектним стаблом. Након трансформације CSS знаковног низа у објектно стабло, плагинови редом аналиѕирају и мењају стабло. Након тога језгро PostCSS-a генерише нови CSS знаковни низ за стабло.

PostCSS и плагинови су написани у Јаваскрипту и дистрибуирани путем npm-a.

PostCSS нуди АПИ ѕа основне операције са ЈаваСкриптом:

// Учитавање језгра и плагинова са npm-а
const postcss = require('postcss')
const autoprefixer = require('autoprefixer')
const precss = require('precss')

// Плагинови који се користе 
const processor = postcss([autoprefixer, precss])

// CSS код и називи фајлова за унос/уписивање 
processor.process('a {}', { from: './app.css', to: './app.build.css' })
  // Коришћење Promise API у случају постојања асинхроних плагинова
  .then(result => {
    // Приказивање пост-процесираног CSS кода
    console.log(result.css)
    // Приказивање поруке упозорења
    for ( let message of result.warnings() ) {
      console.warn(message.toString())
    }
  })

За интеграцију PostCSS-a и система за билдовање (као што су Вебпак,^[14] Галп^[15] и Грант^[16]) развијени су званични алати, као и конзола која се може преуѕети.^[17] Browserify или Webpack омогућавају коришћење PostCSS-a у веб прегледачима.^[18]

• Званични веб-сајт
• PostCSS на ГитХаб-у
• Листа додатака за PostCSS