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

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

Начин функционисања уреди

Структура уреди

 
PostCSS начин рада

За разлику од 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]

Референце уреди

Спољашње везе уреди