PostCSS је софтверски развојни алат за аутоматизацију рутинских CSS операција коришћењем Јаваскрипт плагинова.Први чланак о PostCSS-у на Tuts+ курсу Овај алат је коришћен у развоју кода на Википедији,Додавање PostCSS комита на Википедија репозиторијумВикимедија Стајлинт конфигурација ФејсбукуПобољшање квалитета CSS-а у компанији Фејсбук и другим и ГитХаб-у.PostCSS подешавања ГитХаб алата за билдовањеПример Стајлинт конфигурације PostCSS је један од најпопуларнијих алата међу npm корисницима. Развио га је Андреј Сатник на основу свог рада на пројекту Зли Марсовци ().Evil Martians комит у PostCSS репозиторијуму
Начин функционисања
Структура
thumb|right|PostCSS начин рада
За разлику од Sass-a и LESS-a, PostCSS није шаблонски језик за компајлирање CSS-а, већ фрејмворк за развој CSS алата,Шта је PostCSS - дискусија иако се може користити за развој шаблонских језика као што су Sass и Less.PostCSS детаљно: Препроцесирање помоћу “PreCSS”-а
PostCSS се састоји од следећих компоненти:Андреј Ситник - PostCSS: Будућност након Sass-а и LESS-а
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 и система за билдовање (као што су Вебпак,postcss-loader Галпgulp-postcss и Грантgrunt-postcss) развијени су званични алати, као и конзола која се може преуѕети.postcss-cli Browserify или Webpack омогућавају коришћење PostCSS-a у веб прегледачима.Коришћење PostCSS-а у веб прегледачу
Референце
Спољашње везе
PostCSS на ГитХаб-у Листа додатака за PostCSS
Категорија:CSS Категорија:Софтвер са МИТ лиценцом