PostCSS
 Камен мудрости, PostCSS лого | |
| Оригинални аутор(и) | Андреј Ситник, Бен Бригс, Богдан Чедкин[1] |
|---|---|
| Прво издање | 4. новембар 2013. |
| Стабилно издање | 6.0.2
/ 12. јун 2017.[2] |
| Репозиторијум | |
| Написан у | Јаваскрипт |
| Платформа | вишеплатформски |
| Тип | 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 додатак за npm
- ^ PostCSS издања
- ^ Лиценца у PostCSS репозиторијуму
- ^ Први чланак о PostCSS-у на Tuts+ курсу
- ^ Додавање PostCSS комита на Википедија репозиторијум
- ^ Викимедија Стајлинт конфигурација
- ^ Побољшање квалитета CSS-а у компанији Фејсбук и другим
- ^ PostCSS подешавања ГитХаб алата за билдовање
- ^ Пример Стајлинт конфигурације
- ^ Evil Martians комит у PostCSS репозиторијуму
- ^ Шта је PostCSS - дискусија
- ^ PostCSS детаљно: Препроцесирање помоћу “PreCSS”-а
- ^ Андреј Ситник - PostCSS: Будућност након Sass-а и LESS-а
- ^ postcss-loader
- ^ gulp-postcss
- ^ grunt-postcss
- ^ postcss-cli
- ^ Коришћење PostCSS-а у веб прегледачу
